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

[mohitook]

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?

`

<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>

Products
Dashboard

<!-- 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>

`

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...

[willshowell]

Can you reproduce in a plunker?

[mohitook]

Plnkr :
http://plnkr.co/edit/etkptgACMyo2Ty0SUyjX?p=preview
Unfortunately I can't reproduce this behaviour.. but I have an idea:
the problem is with this element:
md-sidenav-container > div.mat-drawer-content
here:

The margin-left is the property what is wrong. The interesting thing is that is is a counted value based on the sidenav's width. I don't know why but it adds + a few pixel to it what makes this issue..

[willshowell]

This happens consistently? Can you show the styles and computed styles of the md-sidenav? Since you can't replicate in a fresh plunker, it sounds like you may have some overriding css somewhere else.

[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;
    }

}

[mohitook]

so the problem is real. I won't use scss until I have no other option, but thanks for the workaround!

[dereekb]

I've had this issue on macOS Safari only, and haven't seen it appear in Chrome. Happens somewhat consistently, but not always.

The sidenav is also responsive, and it only recently started happening. Might be somewhat related to #6743.

[josephperrott]

It looks like the logic controlling this was updated in #6712

If you are still seeing this issue please provide a reproduction plunker/stackblitz for us to investigate.

[dereekb]

I’ll try and reproduce it when I get a chance, but it only occurred in Safari. I’ll try it on both Sierra and High Sierra.

[functionportal]

In the release 2.0.0-beta.12 the right margin is randomly miscalculated for mat-sidenav-content when sidenav in in side mode. If the sidenav mode is dynamically switched between over and side, the problem randomly resolves itself. There must be some kind of timing issue in calculating the mat-sidenav-content right margin.

[karan-kang]

This issue is reproducible for me.

[afarbman]

having the same issue

[mmalerba]

This sounds like it might be related to https://github.com/angular/material2/issues/5698 which I filed a chrome bug for: https://bugs.chromium.org/p/chromium/issues/detail?id=787628

[mmalerba]

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

[tpeyrard]

@mmalerba it's worse because it makes the problem appear 100% of time.

If I open the sidenav, it adds 215px margin-left, that I don't want. However, if I load another component while the sidenav is open, the 215px are correctly applied (they're applied from the left of the screen, not from the right of the sidenav.

Tried on Firefox 58.

[mmalerba]

@tpeyrard can you provide a stackblitz repro? here's our template: https://stackblitz.com/edit/angular-material2-issue

[ishan123456789]

Removing all the animations helped me fix the issue.Hope this helps someone.

[mmalerba]

I'm assuming this is the same issue as #9837, check out the plunker I posted on that issue for a workaround

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}