Skip to content

Commit

Permalink
fix(grid-list): invalid inline styles when rendering server-side
Browse files Browse the repository at this point in the history
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes angular#6048.
  • Loading branch information
crisbeto committed Jul 26, 2017
1 parent 3cb3945 commit f5ef51f
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/lib/grid-list/tile-styler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -190,16 +190,16 @@ export class RatioTileStyler extends TileStyler {
let percentHeightPerTile = percentWidth / this.rowHeightRatio;
this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);

// Use paddingTop and marginTop to maintain the given aspect ratio, as
// Use padding-top and margin-top to maintain the given aspect ratio, as
// a percentage-based value for these properties is applied versus the *width* of the
// containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
tile._setStyle('margin-top', this.getTilePosition(this.baseTileHeight, rowIndex));
tile._setStyle('padding-top', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
}

getComputedHeight(): [string, string] {
return [
'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)
'padding-bottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)
];
}

Expand Down

0 comments on commit f5ef51f

Please sign in to comment.