From a27d9dfffc11c7ad5f38ea0bc5849760112bb013 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 26 Feb 2018 15:55:31 +0100 Subject: [PATCH] fix(grid-list): invalid style declaration during server-side rendering (#10131) A while ago in #6052, we switched the grid list inline styles to be assigned through the dash-cased properties in order for them to be valid when using the old renderer with parse5. These changes go back to the camel-cased properties, because the dash-cased ones don't work with Domino. Relates to #6048. --- src/lib/grid-list/tile-styler.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index 57969a1bac87..05211e1dddc8 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -210,22 +210,22 @@ export class RatioTileStyler extends TileStyler { // 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('margin-top', this.getTilePosition(this.baseTileHeight, rowIndex)); - tile._setStyle('padding-top', calc(this.getTileSize(this.baseTileHeight, tile.rowspan))); + tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex)); + tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan))); } getComputedHeight(): [string, string] { return [ - 'padding-bottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`) + 'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`) ]; } reset(list: MatGridList) { - list._setListStyle(['padding-bottom', null]); + list._setListStyle(['paddingBottom', null]); list._tiles.forEach(tile => { - tile._setStyle('margin-top', null); - tile._setStyle('padding-top', null); + tile._setStyle('marginTop', null); + tile._setStyle('paddingTop', null); }); }