Hidden Sidenav with side mode does not display properly when removing display none

[mmercure]

Bug, feature request, or proposal:

Bug
Sidenav mode 'side' not working when the sidenav-container is initially 'display: none', and then visible.

What is the expected behavior?

the sidenav-content should be displayed completely, not behind the sidenav.

What is the current behavior?

the sidenav-content is behind the siednav, it does not have margin applied.

What are the steps to reproduce?

StackBlitz repro
Simply click on button "Hide/Display SideNav Container"
the sidenav-container will appear with the issue.
using the toggle sidenav button will fix the issue

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

I'm using 5.2.4 but issue still in latest.

Is there anything else we should know?

Issue also occurs if the display none is set on a parent of mat-sidenav-container.

A workaround would be helpfull!

[mmalerba]

display:none interferes with measurements that the sidenav needs to make to display properly. I recommend that rather than doing display:none you use an *ngIf to show and hide the content: https://stackblitz.com/edit/angular-material2-issue-mvajqp?file=app/app.component.html

[mmercure]

My actual issue is a lot more complicated than that... I'm displaying an angular app in an IFrame, it's the iframe the is set to display none. If I use an ngIf, i'll loose the state of my app.

There are situation when changing the display is more adequate than using ngIf.

[mmalerba]

I see, in that case you can try applying autosize to the mat-sidenav-container to make it recheck its size whenever change detection happens: https://stackblitz.com/edit/angular-material2-issue-g4wy6f?file=app/app.component.html

[mmercure]

Great! thanks a lot,

but I must admit the warning in doc:

Use at your own risk! Enabling this option can cause layout thrashing by measuring the drawers on every change detection cycle

scared me. I'll have to make sure it does not cause other issues.

Keep up the good work

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