peeskillet peeskillet - 1 year ago 149
CSS Question

Sticky MdToolbar inside MdSidenavLayout

I have an Angular 2 Material app that uses the

with an

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

<md-toolbar color="primary" class="toolbar">
toolbar content

And it looks like this

enter image description here

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.

enter image description here

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
. And I'm pretty sure that's what the
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
, but it's what handles the animation and transition to make the toolbar and sidenav consistent when you toggle the sidenav.

enter image description here

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

Here is the Plunker.

Answer Source

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:

You basically disable the scrolling on the sidenav content:

 * The /deep/ selector is simply to overcome view encapsulation
 * and be able to select the 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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download