How to not have the mat-sidenav-content take up blank space on webpage

1
votes

I am creating a mat-sidenav-container to create a mobile menu view. I cannot display the full menu unless I set style="height: 80vh;" in the mat-sidenav-content tags. When I set it I get this blank white space on the webpage:

enter image description here

If I change the style to "style="height: 20vh;" and click on the icon menu, I cannot see all of the choices. I must scroll through them.

How may I display all of the menu choices after I click the menu icon and not have the white blank main content?

Below is the html code:

 <mat-sidenav-container>
      <mat-sidenav mode="push" #sidenav>
        <mat-nav-list>
    <!--These buttons are displayed on greater than xs view-->
    <a mat-list-item  *ngIf="!signedIn" routerLink="/auth" (click)="onSidenavClose()">
      <span class="nav-caption">Log in</span>
   </a>
   <a mat-list-item *ngIf="signedIn" routerLink="/demo" (click)="onSidenavClose()">
     <mat-icon>account_balance</mat-icon><span class="nav-caption">Demo</span></a>
     <a mat-list-item  *ngIf="!signedIn" routerLink="/auth" (click)="onSidenavClose()">
      <span class="nav-caption">Log in</span>
   </a>
   <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
   <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
   <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

   </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <div style="height: 30vh;">      
        </div>
      </mat-sidenav-content>

2
angular

2 Answers

0
votes

Here is working example try this out

0
votes

Try below code,

<mat-sidenav-container style="height:'100vh'">
  <mat-sidenav #sidenav class="slide-mobile-sidenav" style="height: 100vh;">
</mat-sidenav>
</mat-sidenav-container>