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 #6048.
  • Loading branch information
crisbeto authored and andrewseguin committed Jul 27, 2017
1 parent 3bfe7f0 commit 776426e
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 776426e

Please sign in to comment.