From f5ef51f41e0b1d6232749a66f7fdee7e12d5ab38 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 26 Jul 2017 13:19:34 +0300 Subject: [PATCH] fix(grid-list): invalid inline styles when rendering server-side 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. --- src/lib/grid-list/tile-styler.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index 3de1e16cc6f6..dff694f9dd1e 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -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()}`) ]; }