CODEWITHSUNDEEP
angularangular-materialsidenavmat-sidenav
luhu
luhu

Reputation: 381

Force Angular Material sidenav container with toolbar to fill height

I can't get the Angular Material sidenav container to fill the height of the screen. The sidenav as well as the sidenav content is just as high as it needs to be to fit its content. I want to have it's height to fill the screen.

HTML of Nav Component:

<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>Title</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      (click)="closeDrawerIfHandset(drawer)">
      <mat-nav-list>
        <a mat-list-item routerLink="/">Home</a>
        <a mat-list-item routerLink="/link1">Link1</a>
      </mat-nav-list>
  </mat-sidenav> 
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

HTML of parent (root) component:

<main-nav>
    <router-outlet></router-outlet>
</main-nav>

I don't really have CSS applied:

.sidenav {
  width: 200px;
}

This is what it looks like: sidenav does not fill height

I've already tried setting the mat-sidenav-container to fullscreen but that hides the mat-toolbar. When I set the container to have a 'top:' so that the toolbar is shown again, the scrolling is not enough to show the whole page content.

Stackblitz example: https://stackblitz.com/edit/angular-mcbhqt-r7kmlw

Upvotes: 6

Views: 4385

Answers (1)

M4n1
M4n1

Reputation: 47

I had the exact same problem. This solution worked for me

html, body, .material-app, .mat-sidenav-container {
  height: 100%;
  width: 100%;
}

Credits to this answer https://stackoverflow.com/a/51497445/11350563

Upvotes: -3

Related Questions