Make a nested scrollable content area (with toolbar and sidenav) in Angular Material

Question

I am simply trying to get my main view pages to scroll but can not seem to achieve this without setting the height of the div to a specific amount, even whilst using md-content.

The container div that I am using to place all the views is nested two levels deep using ui-view.

The root state is as follows:

<md-toolbar layout="row" layout-align="center center">
    <h3>Site Title</h3>
</md-toolbar>

<div layout="column" flex id="content" ui-view></div>

Then the next view is used to display a toolbar and a sidenav that is present across all child states/views:

<div layout="row" flex>
    <md-sidenav>

        <md-list layout="column" flex>
            //SCROLLABLE SIDENAV WORKS PERFECTLY
            //NAVIGATION ITEMS LIVE HERE
        </md-list>
    </md-sidenav>

<div layout="column" flex>
    <md-toolbar layout="row" layout-align="center center">
        <h2>Subheading</h2>
    </md-toolbar>

    <div class="md-padding" ui-view flex>
        //THIS IS WHERE THE CHILD VIEWS GO
    </div>
</div>

I have tried adding a class to both this final ui-view and also to a div but can only achieve scrolling with a specific height (which obviously doesn't work across devices) and by changing the position which causes problems given that there are two toolbars above it (and also with FAB's that float on top).

md-content doesn't work properly, I'm not sure why something so simple is so difficult in this situation. I am redesigning my webapp which has always used Bootstrap so please forgive my lack of CSS skills as it was already layed out when I received it.

Thank you for your help.

nextt1 nextt1 · Accepted Answer · 2017-02-24T17:50:42

The Parent class which contains the following code must have layout="column" and use md-content wherever you use ui-view.

<md-toolbar layout="row" layout-align="center center">
 <h3>Site Title</h3>
</md-toolbar>

<md-content layout="column" flex id="content" ui-view>
</md-content>

Similarly you should use md-content in following child elements to get the desired result.

Here is the Codepen.

Make a nested scrollable content area (with toolbar and sidenav) in Angular Material

1 Answers