Angular Material SideNav autosize not working

3
votes

I was using Angular Material to build a sidenav that can hide the nav text when onclick menu. I follow the https://material.angular.io/components/sidenav/overview using autosize on mat-sidenav-container

But the sidenav still overlay the mat-sidenav-content part and it doesn't auto resize the content part

I using "@angular/material": "^8.0.2"

enter image description here n

html

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true">

    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
       <mat-icon mat-list-icon>home</mat-icon>
         <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    Main content 

</mat-sidenav-content>

</mat-sidenav-container>

ts file

import {Component} from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
  isExpanded = false;
}

css

.example-container {
  width: 100%;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  padding: 10px;
  height: 100%;
}
4
angularangular-material
you want to hide completely the side nav(not partial) please create a stackblitz of your code(or edit stackblitz available on material site and edit accordingly what you have done till now) - shashank sharma

4 Answers

2
votes
  • Not necessary to use autoSize.
  • Add attribute [style.left]="sidenav.opened ? '.25%' : '0'" to mat-sidenav-content.
  • Not necessary to use opened attribute on mat-sidenav.
  • Use attribue [fixedInViewport]="false" with mat-sidenav.
2
votes

in my case adding autosize="true" fix the issue

<mat-sidenav-container autosize="true">

works for me

0
votes

None of the above solution worked for me. I think the proper solution is to rather than setting the width of <mat-sidenav></mat-sidenav> in the CSS , set it to

min-width:50px

In order to resize according, you should be mentioning the min-width and max-width in the CSS.

-1
votes

Remove the element

<mat-sidenav-content>

I tried in many ways, this was the only one that worked