Angularjs – Angular material sidenav and fixed toolbar

angular-materialangularjs

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.

enter image description here

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

enter image description here

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

enter image description here

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

Best Answer

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

Related Topic