Angular Incorrect Margin-Left Applied To Sidenav Content

Question

I have an Angular project using Angular Material but I\'m running into a bug where sometimes the mat-sidenav-content has a margin-left: 365px; appl

Answer 1

use autosize

<mat-sidenav-container autosize>
<mat-sidenav-container>

Answer 2

Here's what I came up with (using angular's flex-layout):

<div fxLayout="column" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
  <mat-toolbar fxFlex="none">
    <div fxFlex="grow">
      <button mat-button (click)="sidenav1.toggle()">toggle nav1</button>
    </div>
    <div fxFlex="none">
      <button mat-button (click)="sidenav2.toggle()">toggle nav2</button>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlex="grow" fxLayout="row">
    <mat-sidenav opened mode="side" #sidenav1 fxFlex="none"
        [style.position]="sidenav1.mode !== 'over' && sidenav1.opened ? 'relative' : 'absolute'"
        style="width: 240px; background-color: red;">
      nav1
    </mat-sidenav>
    <mat-sidenav opened mode="over" position="end" #sidenav2 fxFlex="none"
        [style.position]="sidenav2.mode !== 'over' && sidenav2.opened ? 'relative' : 'absolute'"
        style="width: 240px; background-color: blue;">
      nav2
    </mat-sidenav>
    <mat-sidenav-content fxFlex="grow" style="background-color: green;">
      content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

.mat-sidenav-content {
  margin-left: 0 !important;
}

Works perfectly on desktop and mobile :)

EDIT: Stackblitz: https://stackblitz.com/edit/angular-r13fve

Answer 3

This error is due to the icons. After a reload (clear cache) with slow connection, angular will start to render the string with the name of the icon. Since the string is larger than the fully rendered icon, there will be extra space. After a reload, since the icon is already on the device storage, this does not happen.

My solution was to fix the value of the sidebar width inline.

Answer 4

Looks like I found the issue. Inside sidenav-group I had

<i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
<i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>

When I should have

<mat-icon mat-list-icon *ngIf="!displayBody">keyboard_arrow_down</mat-icon>
<mat-icon mat-list-icon *ngIf="displayBody">keyboard_arrow_up</mat-icon>

For some reason the <i> would sometimes insert extra space.

Answer 5

I have similar problem that was fixed with setting to

mat-sidenav-content {
    margin-left: 0 !important;
    flex: 1 1 auto;
}

and

mat-sidenav {
    flex: 0 1 auto;
}

together with [style.position]="sidenav.opened ? 'initial' : 'absolute'" and flex to mat-sidenav-container.