Components: Toolbar and Sidenav fixed in sidenav-layout

[sp33dlink]

I'd like to have to Toolbar and the sidenav fixed in my Layout so that only the content is scrolling like the angular 2 docs site: https://angular.io/docs/ts/latest/

This must somehow be possible with the sidenav-layout as many users would like to use this behavior. But i can't get it to work like this.

Plunker: http://plnkr.co/edit/SCkBpDvvWZgGCZKhWDIp?p=preview
This plunker lacks the fixed layout of the sidenavand the scrollbar on the right should only be displayed if the content height is more than the screen height.

[michaeljota]

Rather that seeing as the Toolbar and the sidenav should be fixed in the layout, I guess that the content of the sidenav-layout must be wrapped. This would allow for the expect behavior, but with so much less effort, and must be clearer what it is the intent and why this is happening. Also, I guess you can just wrap yourself the content of the sidenav-layout as a workaround. One more thing, you may want to clear the styles and just place the toolbar inside the sidenav-layout for this to work, however, it is expected to the sidenav overlap the toolbar anyway.

[greg-md]

Just put the md-sidenav out of layout.

<md-sidenav>Fixed sidenav</md-sidenav>

<md-sidenav-layout></md-sidenav-layout>

[ghost]

+1

[RaulRG]

@greg-md I think this is not what @sp33dlink needs. I would like the same feature. Material Design Lite (MDL) calls it fixed header I think. The toolbar stays at the top of your page even if you need to scroll the content. With the current behaviour the toolbar scrolls out of sight if you need to scroll down to see the content.

[greg-md]

@RaulRG, just add style position fixed to the md-sidenav and toolbar will remain on the screen.

[RaulRG]

Thank you @greg-md , but I don't understand what you mean. This is my current layout:

<md-toolbar><span>My Title</span></md-toolbar>
<md-sidenav-layout>
<md-sidenav align="begin" mode="push" #sidenav>
</md-sidenav>
</md-sidenav-layout>

When I open the sidenav using a button (like a hamburger menu not shown in the code above), I want the sidenav to be below the toolbar and to the left.

I tried setting the position to fixed for both the navbar and the toolbar and I don't get the desired result. When I set the position to fixed for the toolbar it disappears!!

Sorry if I didn't understand you.

[greg-md]

@RaulRG as I said in my first comment, just pull out md-sidenav from the md-sidenav-layout and set fixed position to it.

_Example:_

<md-toolbar style="position:fixed;"><span>My Title</span></md-toolbar>
<md-sidenav style="position:fixed;" align="begin" mode="push" #sidenav></md-sidenav>
<md-sidenav-layout></md-sidenav-layout>

PS: This is a temporary solution until material will fix in their own way.

[PrazSam]

I'm having the same issue as @RaulRG said. Toolbar just diapered when using the way @greg-md mentioned. This issue is a real headache. Hope they will fix this soon.

[PrazSam]

@RaulRG I just fixed it following the accepted answer of this stackoverflow question . Have a look.

[greg-md]

@PrazSam I don't know what is not working for both of you, maybe we misunderstood each other.

Here is an example of what I'm talking about: http://plnkr.co/edit/XfQxFVH8ZgQo0SsHCKA5?p=preview

cc @RaulRG

[cuongn265]

@PrazSam Which version are you using? I followed that answer and it still doesn't work. I'm using ^2.0.0-beta.3

[PrazSam]

@cuongnm265 It's working for ^2.0.0-beta.2 which I'm currently using. Seems there is no change in their beta.3 release on it and should work. What I did was the exact same way the StackOverflow says.

[axtho]

I also would like to know how to get that working with a similar setup as the angular site. Currently my layout is like this:

The main part of the scss for the main container (where the image is from) looks rather unimpressive:

html, body, mh-app, md-sidenav-container {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  main {
    min-height: 100%;
    .mat-sidenav {
      min-width: 30vw;
      .mat-button {
        width: 100%;
        position: relative;
        bottom: 0;
        margin: 24px 0;
      }
    }
    .mat-toolbar {
      box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
      z-index: 1;
      .mat-icon {
        cursor: pointer;
      }
    }
  }
}
... (there is more color and spacing styling going on below)

I have tried to add overflow: hidden to the md-sidenav-container, but to no success.

Isn't there a simple setup to achieve this?
Looking at Covalent's layout (from the demo app) there seems nothing amazing going on, except for the main layout component they use, which has in it's scss the following:

:host {
  display: flex;
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;

  /deep/ {
    & > md-sidenav-container > md-sidenav {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
    }
  }
}

... with the overflow: hidden being again the interesting part.
The above plunkers do not work anymore.

Any help or pointers would be welcome.

[tstephansen]

@axtho Is this what you're trying to do?

https://embed.plnkr.co/KFG66YBi3ghrFZHVLIB2/

[stefanoguglielmi]

i added the following css code to fix the sidenav:

.mat-sidenav-container {
    min-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100vh;
}
.mat-sidenav {
    min-width: 250px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    height: 100vh;
}

[nayfin]

Here's a plunk w/fixed header, a routed body, and one of the routes has a sidenav with fixed header. Be sure to check the global css file for the tweaks that made everything work:

.body-content {
  overflow: auto;
}

html, body {
  height:100%;
  min-height:100vh;
  margin:0;
}
.mat-sidenav-content {
  flex: 1;
}

Not happy with setting .mat-sidenav-content globally. Please let me know if you have alternative or manage to clean anything else up.

[SvenBudak]

@tstephansen What exactly you do? that the background is sticky when the sidenav is opend?

[mmalerba]

Sidenav now supports fixed layout, docs are coming in https://github.com/angular/material2/pull/7775

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}