Css – Angular material mat grid list not expanding

angularangular-material2css

I am new to the angular-material libary (and material design spec in general), I have used bootstrap for years, so am not sure I am implementing mat-grid-list correctly, but I have the follwing:

<mat-card>
<mat-grid-list cols="2">
    <mat-grid-tile>
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
        <mat-list>
            <mat-list-item> 
                <button  mat-raised-button color="warn">
                        {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
        <mat-list>
            <mat-list-item> 
                <button mat-raised-button color="accent">
                    {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
</mat-grid-list>

This is based off of the angular-material example, to which I have included a working stackblitz example: https://stackblitz.com/edit/angular-cccnjp?file=app%2Fsidenav-responsive-example.html

As you can see, the buttons have been rendered inside the mat-grid-tile-header and the mat-card has not expanded to accomodate the content provided (as I would expect)

EDIT: So, I did try using the rowHeight="fit" attribute on the mat-grid-list but this doesn't render any content, I would expect this to expand the height of mat-grid-list depending on content, but this is not working.

https://stackblitz.com/edit/angular-cccnjp-ylmzf9?file=app/sidenav-responsive-example.html

UPDATE: ugly working solution

So I managed to acheive this with some (quite ugly) css…

<mat-card class="height100p">
<mat-grid-list cols="2">
    <mat-grid-tile class="mat-grid-tile-custom">
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
        <mat-list class="custom-mat-list">
            <mat-list-item> 
                <button  mat-raised-button color="warn">
                        {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
    <mat-grid-tile class="mat-grid-tile-custom">
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
        <mat-list class="custom-mat-list">
            <mat-list-item> 
                <button mat-raised-button color="accent">
                    {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
</mat-grid-list>

.height100p {
    height: 100%;
}
.mat-grid-tile-custom {
    overflow: visible!important;
}

.custom-mat-list { /* this is bad! */
    padding-top: 50%!important;
}

.mat-grid-tile-custom .mat-figure {
    align-items: unset!important;
}

As you can see, the glaring error/problem here is the .custom-mat-list with a padding-top of 50%, this will be different between browsers, although technically this works, I don't think its a long term solution, if anuone has any thoughts/improvements or suggestions I would be very grateful.

Stackblitz example: https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.css

Best Answer

mat-grid-list and mat-list layout component. It's not use to be content each other. You should pick one as a layout.

For example you trying combine mat-button-toggle and mat-button. like this:

<mat-button-toggle>Toggle me!
  <button mat-button>Click me!</button>
</mat-button-toggle>

it doesn't work like that, right?

if your purpose to use 2 dimension, you can use grid only like this:

<mat-grid-list cols="2"  gutterSize="30px" rowHeight="5:1">
  <mat-grid-tile>
    <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
  </mat-grid-tile>
  <mat-grid-tile >
    <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
  </mat-grid-tile>
  <mat-grid-tile>
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
</mat-grid-list>

TL;DR;

Don't combine list view and grid, choose one. Or you will break material design spec, see grid Documentation.

UPDATE

For loop data with to listview, use tab layout. check this out for sample:

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-tab-group>
      <mat-tab label="Clocked In">
        <h1>Clocked In</h1>
        <mat-list *ngFor="let user of usersIn">
          <mat-list-item>
            <button mat-raised-button color="warn">
            {{user}}
        </button>
          </mat-list-item>
        </mat-list>
      </mat-tab>
      <mat-tab label="Clocked Out">
        <h1>Clocked Out</h1>
        <mat-list>
          <mat-list-item *ngFor="let user of usersOut">
            <button mat-raised-button color="warn">
            {{user}}
        </button>
          </mat-list-item>
        </mat-list>
      </mat-tab>
    </mat-tab-group>
  </mat-sidenav-container>
</div>

<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>

Link:

https://stackblitz.com/edit/angular-cccnjp-ufqtvj?file=app/sidenav-responsive-example.html

Related Topic