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.

Placer

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;
}

Kismet

Thanks. It works great. And you're right, it does make more sense to make the content scroll, especially with the sidebar, which is a road I haven't even reached yet to have to think about it. A little off topic, but do you know any good slim scroll libs that you would recommend for Angular 2? – Placer

@peeskillet I've recently made one directive for it in a private project, maybe it works well enough for your needs, if not you can always see the code and fix what you need. Once I publish it I will ping you back... – Kismet

@snolflake. superb answer ! I tried and invested sometime to do it but I couldn't do it. – Scarce

@peeskillet I've published what I've been using for slim scroll on angular. At some point I will make it more stable and provide it as a npm package, but for now you can use it as a starting point for your own needs. – Kismet

@Scarce Thanks for trying. – Placer

@snolflake Thanks I'll check it out! – Placer

Thanks a lot. This is really really helpful. Saved my day +100 – Evita

Maybe it´s just me but on mobile when opening the sidebar the .app-content gets scrolled to top.. ? That kind of makes this solution hard to justify :( – Weatherly

@Weatherly maybe it is scrolling to top because your sidebar button is link with a href="#" in it. If that's the case replace it with href="javascript:void(0)". – Kismet