Can md-toolbar be fixed top when inside md-sidenav-layout?

Question

Am really struggling here. We're using md-sidenav-layout and finding it impossible to come up with a way to fix the md-toolbar to the top of the page:

|--------------------------------|
|   <------ md-toolbar ------->  |       <- fix this so content scrolls under
|--------------------------------|
|                               ^|
|           scrollable           |
|                               v|
----------------------------------

Because of the way md-sidenav-layout seems to fix itself, adding

style: fixed

to the md-toolbar doesn't fix it - in fact nothing seems to!

Any help appreciated.

Solution 1

For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify

transform: translate3d(0,0,0)

What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.

See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children

Solution 2

Use this:

<md-toolbar color="primary" layout="row" style="position: fixed;">
</md-toolbar>
<md-sidenav-container fullscreen>
</md-sidenav>

css:

.mat-toolbar.mat-primary{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

Comments

[Paul Samsotha]

Have a look at this post

[Admin]

I swear angular-material is the worst "framework" I ever had to work with. Why does one use a monster like this when you have to add custom style definitions to have basic functionality is truely beyond me. Might as well just write your own css to begin with. At least it will do what you want and you won't have to consult anyone but your own creativity.

[GxTruth]

Although your comment is about a year old, I found it to be valid to this day. I just tried to setup a simple website skeleton consisting of a toolbar, a sidenav and the main content area, each scrollable on their own. I'm working on this for solid 4 hours now, simply because I have to tweak each element separately and AngularMaterial messes up every single UI element I add in some weird way. After coming back 3 times, saying "this time you'll get it" to myself, I'm done. Screw Angular (Material), seriously. I tried to learn this "intuitive API" several times really hard, but I'm done now.

[netlander]

Let us know what other framework have you migrated to and whether you're satisfied with your choice.