Angular material sidenav and fixed toolbar

Question

I copied this sidenav demo from the angular material docs. https://material.angularjs.org/latest/demo/sidenav

And added the first toolbar demo to it from https://material.angularjs.org/latest/demo/toolbar

What I want is the toolbar to be fixed.

Codepen demo: http://codepen.io/gvorster/pen/BzWvGe

When adding this style the toolbar is fixed.

<md-toolbar class="md-hue-2" style="position:fixed !important">

But the icons on the right are gone.

Resizing the screen until the sidenav is hidden will show the right side icons.

Removing the style shows the right side icons but the toolbar is not fixed:

Is there a way to get a sticky toolbar and have the rigth side icons shown.

Solution 1

You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.

Here is the basic structure for your requirement.

<md-content flex>
    <md-toolbar>
    </md-toolbar>

    <md-content layout="column" layout-fill>
        <!-- content -->

        <md-sidenav>
        </md-sidenav>
    </md-content>
</md-content>

here is the working pen. http://codepen.io/next1/pen/xOqMjy

Solution 2

You need to add layouts for all containers and move the toolbar out of the md-content that should be scrolled.

<div layout="row" flex>
 <md-sidenav></md-sidenav>
 <div layout="column" flex>
   <md-toolbar></md-toolbar>
   <md-content></md-content>
 </div>
 <md-sidenav></md-sidenav>
</div>

Here's a working demo: http://codepen.io/anon/pen/EyWJKK?editors=1010

Comments

[Aarmora]

Is there a way to do this with material for angular 2? It doesn't appear that md-content exists and I'm having the exact same issue as @Guus.