Sticky MdToolbar inside MdSidenavLayout

Question

I have an Angular 2 Material app that uses the <md-sidenav-layout> with an <md-toolbar> inside.

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

And it looks like this

What I'm trying to do is have the toolbar stick to the top so it doesn't move when you scroll down. This is to make it consistent with the sidenav and its title. But currently it doesn't work.

I though that adding position: fixed; top: 0 would do the trick but it doesn't

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

From what I read from MDN: position and this SO post about position: fixed, it seems it won't work if the parent uses a transform. And I'm pretty sure that's what the md-sidenav-layout uses for transition when the sidenav is toggled. I've tested the position: fixed; top: 0 on a simple static page, and it works fine.

I could try to take the toolbar out of the context of the md-sidenav-layout, but it's what handles the animation and transition to make the toolbar and sidenav consistent when you toggle the sidenav.

My CSS-fu isn't strong. Maybe I'm missing something. Any body got any ideas on how to fix this? Any work-arounds are welcome at this point, as long as I get the desired effect.

Here is the Plunker.

Answer 1

You should put the content scroll on the... content. This is not only a workaround, I actually do it myself everytime I need this kind of layout because it fells more natural to have scrollbar inside the thing you're going to scroll in to. If the sidebar contents gets too big for example, it needs to have its own scroll context as well.

Not sure why the material team implemented it this way, but probably having a fixed toolbar will be the default behavior in the final version when using it with a sidenav layout (or at least we will have an option for it I hope).

Anyway, I've updated your plunker to show what I mean: http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

You basically disable the scrolling on the sidenav content:

/*
 * The /deep/ selector is simply to overcome view encapsulation
 * and be able to select the div.md-sidenav-content generated at runtime
*/
md-sidenav-layout /deep/ .md-sidenav-content {
  overflow: hidden;
}

Then you just make .app-content fill the right height and set its overflow to auto:

.app-content {
  padding: 20px;
  height: calc(100% - 64px);
  overflow: auto;
}