CODEWITHSUNDEEP
javascriptcssangulartypescriptangular-material
DoraTheDestroyer
DoraTheDestroyer

Reputation: 115

How can I have nested grid-lists in angular material?

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.

Upvotes: 6

Views: 9772

Answers (2)

Tony Brasunas
Tony Brasunas

Reputation: 4611

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;
}

Upvotes: 1

Akber Iqbal
Akber Iqbal

Reputation: 15041

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

Upvotes: 13

Related Questions