Components: main content scrolling should be independent of sidenav's scrolling/position

[uzumakinaruto123]

Bug, feature request, or proposal:

Bug + feature request .

What is the expected behavior?

<md-sidenav></md-sidenav> , <md-toolbar></md-toolbar>, and <md-content> inside should be all fixed in position. Having their own independent scrolls if necessary. should behave like independent compnents.

Especially ,
<md-content> should be independent so that any component/router-outlet placed inside can scroll if necessary.

OUT OF THE BOX , there should be a sidenav-layout template/snippet and some directives for toolbar which can be given any structure wanted. toolbar directive like fixed="true/false"

Like,

<md-sidenav-layout>
    <md-sidenav #start mode="{{hasMedia('gt-xs') ? 'side' : 'over'}}" [opened]="true">


    </md-sidenav>

    <md-content>
        <md-toolbar color="warn">


        </md-toolbar>
        <div layout="column" layout-fill layout-align="top center">

            <div class="routerview">
                <router-outlet></router-outlet> // the only dynamically changing part in whole SPA should be scrolling without any styling. 
            </div>
        </div>
        <div flex></div>
    </md-content>
</md-sidenav-layout>

What is the current behavior?

The only way to enable scroll i found was on md-sidenav-layout, which scrolls whole layout.
Changing any inner children postioning just adds to the mess.

Simply changing md-sidenav-layout to some div/section with layout="row" flex style="min-height: 100%;" scrolling works well. Except , the 'over' mode of md-sidenav is messed since there's no md-sidenav-layout

What are the steps to reproduce?

http://plnkr.co/edit/ORA0KloDddgseMIOQ71i?p=preview

SO issue :- http://stackoverflow.com/questions/37857873/angular2-material-md-content-scrolling-issue

What is the use-case or motivation for changing an existing behavior?

To get more user-friendly control over material component styling and positions.

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

Angular 2.0.0 RC , Material 2.0.0-alpha.5-2 , Browsers tested on chrome/mozilla

[Forusim]

I totally agree,
Fought like 3 hours to fix the toolbar at the top and get only the content scrolling.
The mess happens mostly, when the md-sidenav-layout is wrapping everything but the md-sidenav in md-content element, which has on default the "display: block".
Adding css in the app.component is useless, because md-sidenav-layout is the host for the wrapping md-content.
So the only workarround is this unglyness in a global css:
md-sidenav-layout > md-content { display: flex !important; flex-direction: column !important; }
Please remove the md-content wrapper or the "display:block" property.

[uzumakinaruto123]

@Forusim

For now i have ditched material sidenav .

I am using http://purecss.io/ sidenav. with exampe here http://purecss.io/layouts/side-menu/. Only a 0.8 kb cdn link can make it.

Which is so straightforward and simple. nothing complicated plus responsive.
I would recommend material team to follow purecss approach for sidemenu atleast.

[sandershihacker]

I'm having the same problem, will there be a fix soon? Or is there already a way to fix the sidenav while letting the content scroll?

[LanderBeeuwsaert]

Same here, ATM sidenav is not really easy to handle.

[tarlepp]

Any updates for this ?

[martinmcwhorter]

I found if I put a component with a fixed position inside the SideNav, I got the desired results.

[artjomzab]

The following works only when put into the styles.css file:

.md-sidenav-content {
  display: flex !important;
  flex-direction: column !important;
}

But it does not take effect

[mmalerba]

The "Sidenav with FAB" example here (under "examples" tab) demonstrates how to have independently scrolling sidenav & content: https://material.angular.io/components/component/sidenav

[Deams51]

@mmalerba Would it be possible to get a real example rather than an explanation?

[flamusdiu]

@mmalerba Also, those examples do not seem to work any more for those coming to this github issue from a web search.

[mmalerba]

I added a number of examples in https://github.com/angular/material2/pull/7775, they haven't made it to the docs site yet

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