Skip to content

Commit

Permalink
fix(grid-list): invalid inline styles when rendering server-side (#6052)
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 #6048.
  • Loading branch information
crisbeto authored and andrewseguin committed Jul 28, 2017
1 parent 0409707 commit 22ce1da
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 22ce1da

Please sign in to comment.