Angular Sidenav: Sidenav zu klein, wenn Component in Sidenav
Content
Problem:
Wenn man eine Angular Component in die Sidenav als Content
in den großen Bereich legt, dann schrumpft die Höhe der Sidenav auf wenige
Zeilen zusammen
Lösung:
Man kann in dem Container der Sidennav die Style-Höhe auf
gesamt 100% setzen
Problem
Code with
component in mat-sidenav-content
|
<mat-sidenav-container >
<mat-sidenav [(opened)]="sidenav_opened" #sidenav mode="side">
<mat-nav-list>
<a mat-list-item> Timelist </a>
<mat-list-item routerLink="/projects">Projects</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
<app-page ></app-page>
</mat-sidenav-content>
</mat-sidenav-container>
|
Lösung:
Style height:100% in Container
Gelöst mit height:100% in sidenav Container
|
<mat-sidenav-container style="height:100%;" >
|
|
<mat-toolbar color="primary" class="example-toolbar">
<button (click)="sidenav_opened = !sidenav_opened" style="border-radius: px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar>
<mat-sidenav-container style="height:100%;" >
<mat-sidenav [(opened)]="sidenav_opened" #sidenav mode="side">
<mat-nav-list>
<a mat-list-item> Timelist </a>
<mat-list-item routerLink="/projects">Projects</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
<app-page ></app-page>
</mat-sidenav-content>
</mat-sidenav-container>
|