👁‍🗨 Angular Sidenav: Sidenav zu klein, wenn Component in Sidenav Content

Angular Material ; Angular Sidenav ;

Angular Sidenav: Sidenav zu klein, wenn Component in Sidenav Content

29.01.2021 (👁3488)

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>