mat-sidenav-container - hide address bar on mobile devices

[maku]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

When using mat-sidenav-container it should be able that address bar on mobile devices will be hidden when scrolling.

What is the current behavior?

Address bar is not hidden.

I guess because of the "content" is placed in mat-sidenav-container the content "scrolls" in mat-sidenav-container and therefore the browser is not aware of the scrolling.

What are the steps to reproduce?

Look at e.g. https://material.angular.io

Maybe it is possible to use mat-sidenav without mat-sidenav-container...

[juane1000]

First time commenting on GitHub so apologies if my response is a bit lacking! I've been struggling with this issue since Angular Material v1 of AngularJS. Whenever the height of a container is set to 100% with overflow on AUTO, it introduces a scrollable region that the browser doesn't recognize as a normal entire viewport scroll..if that makes sense. Which has that annoying effect of the URL bar on mobile devices staying visible.

As of the latest update to the Material module last week, 2.0.0-beta.12 marble-mustache, this has been fixed by enabling the fixedInViewport attribute on the matSidenav element. Set it to TRUE and you're off to the races. It worked out of the box for me. Just be sure not to set the html, body, app-root elements to 100% height like the docs suggest. That is pre-latest update technique for fixed sidenav that resulted in the scrollable region. There really isn't much to it. I just added that attribute and worked as advertised.

https://material.angular.io/components/sidenav/api

The api section of the docs have been updated to reflect that new attribute on the matSidenav so check it out for better details.

Hope this helps!

Edit - The only issue I'm having with it is that it seems to hide my sticky toolbars. I've pinned it down to the overflow: hidden on the .mat-drawer-container class and the overflow: auto on the .mat-drawer-content class. So I just set that to visible on both.

[josephperrott]

@mmalerba Was this already addressed?

[mmalerba]

The sidenav does support this now, but you have to structure the page so that the body is the element that scrolls. To do that you'll need to use the fixedInViewport property. An example of how to do it can be found in this PR to update the documentation: #7775

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