How do I render Mat-Card inside of Mat-Expansion Panel inside of the Side Navigation Primary Content Area?

Question

Angular 6 Project with Material Components. This is a small website for internal use. It's purpose is to link to external resources. Each resource is represented by a card, which I would like to sort into expansion panels. however, I am unable to achieve the desired effect.

Expansion panel opened:

Expansion panel closed:

As you can see, when the expansion panel opens and closes, it impacts the entire screen.

Dashboard Component HTML

<div class="grid-container">
  <h1 class="mat-h1">Document Management</h1>
  <mat-grid-list cols="6" rowHeight="250px">
    <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
           <img src="https://www.sketchapp.com/images/app-icon.png">
          <a mat-raised-button color="primary" onClick="window.open('//google.com')">Google</a>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

</mat-expansion-panel>

Dashboard Component CSS

.grid-container {
  margin: 20px;
}

.dashboard-card {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  max-height: 180px;
}

.more-button {
  position: absolute;
  top: 5px;
  right: 10px;
}

.dashboard-card-content {
  text-align: center;
}

Dashboard Component TS

import { Component } from '@angular/core';

@Component({
  selector: 'irgdashboard',
  templateUrl: './irgdashboard.component.html',
  styleUrls: ['./irgdashboard.component.css']
})
export class IRGDashboardComponent {
  cards = [
    { title: 'Card 1', cols: 1, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 1 },
    { title: 'Card 4', cols: 1, rows: 1 },
    { title: 'Card 5', cols: 1, rows: 1 },
    { title: 'Card 6', cols: 1, rows: 1 },
    { title: 'Card 1', cols: 1, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 1 },
    { title: 'Card 4', cols: 1, rows: 1 },
    { title: 'Card 5', cols: 1, rows: 1 },
    { title: 'Card 6', cols: 1, rows: 1 },
  ];
}

Side Navigation Component HTML

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="false"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Forms</span>
    </mat-toolbar>
    <irgdashboard></irgdashboard>
  </mat-sidenav-content>
</mat-sidenav-container>

Side Navigation Component CSS

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
  box-shadow: 3px 0 6px rgba(0,0,0,.24);
}

Side Navigation TS

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'irgsidenav',
  templateUrl: './irgsidenav.component.html',
  styleUrls: ['./irgsidenav.component.css']
})
export class IRGSidenavComponent {

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(private breakpointObserver: BreakpointObserver) {}

  }

App Component HTML

<irgsidenav></irgsidenav>

I am just beginning to dive into developing web applications with Angular and believe I may be missing something simple. Please let me know if you need any additional information. Any input is appreciated.

G. Tranter G. Tranter · Accepted Answer · 2018-05-29T22:10:58

It looks like your irgdashboard element is the entire main content area, and it contains only the expansion list. That makes the application height follow the expansion list height producing the problem you have. You need your main content area to be a DIV or other element which expands to occupy the full height of the application (under the toolbar) at all times (100%). You then add your expansion list to that container and the expand and collapse will not resize the app.

How do I render Mat-Card inside of Mat-Expansion Panel inside of the Side Navigation Primary Content Area?

1 Answers