After upgrade MatSidenav does not set margin-left anymore (mode side)

[karlhaas]

Bug, feature request, or proposal:

After upgrade to 2.0.0-beta.12 MatSidenav does not set margin-left anymore (mode side). The Sidenav does then overlap the content.

What is the expected behavior?

Sidenav does not overlap the content in case of mode side.

What is the current behavior?

In our case the mat-sidenav-container is located inside a component which is loaded by the router. When loading the route which contains the Sidenav directly, the Sidenav overlaps the content. When loading a different route and then navigating to the route containing the Sidenav, the Sidenav sets the margin as expected and does not overlap the content.

It looks like a timing issue and that _updateContentMargins does not get called. https://github.com/angular/material2/blob/7fe1b81a47b6de036ae85c183328400e45c40b15/src/lib/sidenav/drawer.ts#L569

After a reload it overlaps again.

@jelbourn any ideas? Thx!

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

Angular 4.4.4
Material 2.0.0-beta.12

[karlhaas]

When changing the mode after a certain amount of time, the margin gets calculated. When I set the mode immediately in ngAfterViewInit or with a timeout of 0 it does not help.

mode: string = 'push';

  ngAfterViewInit() {
    setTimeout(() => {
      this.mode = 'side';
      this.changeDetectorRef.markForCheck();
    }, 1000);
  }

[willshowell]

I tried reproducing before with no luck. Think you could provide a stackblitz of it?

[karlhaas]

@willshowell today I was able to identify the reasons ...

• In our project we load the theme (one big CSS-File) from the server and attach it to the head after it has been loaded. The application bootstraps and the layout (including the sidenav) is hidden (visibility hidden) by a loader until the CSS has been loaded. It seems that the Sidenav calculates the width (margin of the content) before we have loaded the theme. I was able to reproduce this behavior in our project. The margin does not get updated when the styling of the sidenav changes, it keeps using the wrong margin.

• It seems that another issue in our case is that the content of the sidenav is also loaded via the angular router. I think that the Sidenav calculates a width of 0px because of that. After replacing the router outlet by a static content, the width is ok and only the first problem remains.

As a workaround I can now hide the complete layout using ngIf until the theme has been loaded (instead of hiding it). With this small change it works but I don't think that this is a good solution.

[karlhaas]

The workaround mentioned above does not work - it is still a timing issue. Sometimes the margin-left is set, sometimes not

[willshowell]

@karlhaas since you know when the stylesheet will be available, another workaround may be to trigger _updateContentMargins() by quickly toggling the mode after the styles have loaded.

You kind of also alluded to this, but maybe just postpone creation of the drawer with ngIf (instead of the whole layout).

Or maybe you could break your stylesheet up so that whatever styles affect the drawer width will load long before bootstrapping completes.

[karlhaas]

@willshowell I moved the ngIf to the drawer/sidenav. This currently solves the issue with the wrong calculated width. Then we found out that the major issue is that we hide the content while we load the theme using display: none !important;. Now we just show a loader with huge z-index and don't hide the main content. It seems to work ...

[karlhaas]

Don't know if our case is to special in order be considered in the library. For now I'm closing the issue ...

[angular-automatic-lock-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.}