Skip to content

Commit b47097d

Browse files
karajelbourn
authored andcommitted
fix(grid-list): account for gutter in total list height (#545)
1 parent efd1be2 commit b47097d

File tree

1 file changed

+23
-7
lines changed

1 file changed

+23
-7
lines changed

src/components/grid-list/tile-styler.ts

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,16 +97,30 @@ export class TileStyler {
9797
tile.setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
9898
}
9999

100-
/** Sets the vertical placement of the tile in the list.
101-
* This method will be implemented by each type of TileStyler.
100+
/** Calculates the total size taken up by gutters across one axis of a list.
102101
* @internal
103102
*/
104-
setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, gutterWidth: number) {}
103+
getGutterSpan(): string {
104+
return `${this._gutterSize} * (${this._rowspan} - 1)`;
105+
}
105106

106-
/** Calculates the computed height and returns the correct style property to set.
107-
* This method will be implemented by each type of TileStyler.
107+
/** Calculates the total size taken up by tiles across one axis of a list.
108108
* @internal
109109
*/
110+
getTileSpan(tileHeight: string): string {
111+
return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
112+
}
113+
114+
/** Sets the vertical placement of the tile in the list.
115+
* This method will be implemented by each type of TileStyler.
116+
* @internal
117+
*/
118+
setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, gutterWidth: number) {}
119+
120+
/** Calculates the computed height and returns the correct style property to set.
121+
* This method will be implemented by each type of TileStyler.
122+
* @internal
123+
*/
110124
getComputedHeight(): [string, string] { return null; }
111125
}
112126

@@ -132,7 +146,9 @@ export class FixedTileStyler extends TileStyler {
132146

133147
/** @internal */
134148
getComputedHeight(): [string, string] {
135-
return ['height', calc(`${this._rowspan} * ${this.getTileSize(this.fixedRowHeight, 1)}`)];
149+
return [
150+
'height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)
151+
];
136152
}
137153
}
138154

@@ -165,7 +181,7 @@ export class RatioTileStyler extends TileStyler {
165181
/** @internal */
166182
getComputedHeight(): [string, string] {
167183
return [
168-
'paddingBottom', calc(`${this._rowspan} * ${this.getTileSize(this.baseTileHeight, 1)}`)
184+
'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)
169185
];
170186
}
171187

0 commit comments

Comments
 (0)