Reputation: 381
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;
}
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
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