Angular sidenav material and fixed toolbar

Question

I copied this sidenav demo from an angular materials document. https://material.angularjs.org/latest/demo/sidenav

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

I want 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 have disappeared.

Resizing the screen to hide sidenav will show icons on the right side.

Style removal shows icons on the right side, but the toolbar is not fixed:

Is there a way to get a sticky toolbar and show icons on the sidebar.

Answer 1

You should use md-sidenav inside the md-content container. Plus try using md-content instead of the div tag. In your example, you specified invalid values ​​for the 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> 

a pen works here. http://codepen.io/next1/pen/xOqMjy

Answer 2

You need to add layouts for all containers and pull the toolbar out of the md content you need to scroll through.

 <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