When I try to nest grids in angular, the internal grid disappear. Here is an example : https://stackblitz.com/edit/angular-eib7wz
I tried playing around with the column property but I still get a similar result, the nested grid does not show up at all.
I am using the grid list to separate my page into small sections and in each section I want to place a different component and one of these components is another smaller grid.
I am open to suggestions. Thank you for the help.
The grid does show up when nested, only the size the zero... so we add a div and style it... i deliberately put min-width:80%... to achieve your objective, you might want to put min-width:100%:
add the following relevant CSS:
.internalMatGrid{ border:1px solid red; min-width:80%;}
relevant HTML:
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
<div class='internalMatGrid' >
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
you can check a working stackblitz here
In some instances with nested Material components, such as mat-grid-list, you need to use both /deep/ and !important.
For instance, with this HTML code:
<mat-grid-list *ngFor="let diet of diets"
cols="8"
rowHeight="210px"
gutterSize="1px">
<mat-grid-tile class="diet-name">
{{ diet.name }}
</mat-grid-tile>
<mat-grid-tile *ngFor="let day of diet.days"
class="outer-tile">
...
</mat-grid-tile>
</mat-grid-list>
If you want to add a style around the text, which ends up wrapped in a <figure> tag, you'll need to go with something like this in your CSS:
/deep/ .mat-grid-tile.diet-name figure.mat-figure {
margin: 0 5px !important;
}
