md-sidenav-container > div.mat-drawer-content unwanted margin

Bug, feature request, or proposal:

bug

What is the expected behavior?

There should be no unnecessary margin between the sidenav and the normal content.

What is the current behavior?

What are the steps to reproduce?

`<md-toolbar class="mat-elevation-z5" color="primary">

<button md-button routerLink="/">
  <md-icon>home</md-icon> 
      {{title}}</button>

  <!-- This fills the remaining space of the current row -->
  <span class="fill-remaining-space"></span>
  <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <button md-button routerLink="/products">Products</button>
      <button md-button routerLink="/dashboard">Dashboard</button>
  </div>
  <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
   <md-icon>menu</md-icon>
  </button>

</md-toolbar>

<md-menu x-position=“before” #menu=“mdMenu”> <button md-menu-item routerLink="/products">Products</button> <button md-menu-item routerLink="/dashboard">Dashboard</button> </md-menu>

<md-sidenav-container class="myTestClass"> <md-toolbar color="primary" style="margin-left:0px"> <button *ngIf="isMobileView" md-icon-button (click)="sidenav.toggle()"> <md-icon class="md-24" >menu</md-icon> </button> </md-toolbar>

<!-- https://github.com/angular/material2/issues/1130 -->
<md-sidenav #sidenav class="app-sidenav"  mode="{{isMobileView?'over':'side'}}" opened="{{!isMobileView}}" disableClose="{{!isMobileView}}">
  <md-nav-list >
      <a md-list-item (click)="onLinkClick(sidenav)" >Majom Csimpánz Viziló</a>
      <a md-list-item href="page2.html">Page 2</a>
      <a md-list-item href="page3.html">Page 3</a>
  </md-nav-list>
</md-sidenav>
    
      <div class="app-content" style="padding-top:50px;"
      >
      <router-outlet></router-outlet>
    </div>

</md-sidenav-container>`

Please ignore the unnecessary codes.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

newest

Is there anything else we should know?

After I resize the window and the sidenav goes to mobile mode, and back -> the unwanted margin is gone…

[sina-masoud-ansari]

I’m having the same issue, sidenav-width 250px, margin-left on Safari 399px.

Just fyi, a current work around in our project where the sidenav auto collapses for smaller screens:

.sidenav-container .mat-drawer-content {
  margin-left: $sidenav-width !important;

}

@media (max-width: $md-thresh-min) {

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

}

[mmalerba]

Those of you experiencing issues, have you tried the autosize option? does it help?