unable to have md-toolbar fixed at top

Question

I am trying to do similar to what is asked in this question Can md-toolbar be fixed top when inside md-sidenav-layout?

where I wants a fixed toolbar and then scrolling area. I tried the solution provided in that question but that did not work. I have also searched all the option on git hub ( https://github.com/angular/material2/issues/735) nothing seems to be working for me.

I am using Angular 2 and Angular material 2 (https://material.angular.io/) My application component code is follows

<md-sidenav-container [class.m2app-dark]="isDarkTheme">
  <md-sidenav #sidenav mode="side" class="app-sidenav">SideNave</md-sidenav>

  <md-toolbar color="primary" class="md-medium-tall">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>
    Sample
    <span class="app-toolbar-filler"></span>
    <button md-button routerLink="/home">HOME</button>
    <button md-button routerLink="/contacts">CONTACTS</button>
    <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
  </md-toolbar>

  <router-outlet></router-outlet>
</md-sidenav-container>


<span class="app-action" [class.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>add</md-icon></button>
</span>

Is there any way I can have fixed toolbar with scrollable content area with side navigation

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

score 1 · Answer 1 · answered Jun 30 '17 at 19:35

I'm also trying to solve the same issue but in addition I need a md-sidenav within the scrollable area. Please note, what I discovered might be a workaround until they replace md-content.

What I noticed when reading the documentation at the link below, was they are actually showing scrollable content nested within the demo window. The major difference is they are split the screen (md-sidenav) at a certain width, about 50%, by changing the width to width:100% it filled the entire content area. Then I decided to just use the md-sidenav as my actual content area as a replacement for md-content.

https://material.angular.io/components/sidenav/examples

The workaround:

You can try following code to place md-sidenav-containers nested within each other, since md-sidenav-containers respect material 2 layouts, creating a FULL width md-sidenav that does not close at 100% width works and md-sidenav already contains proper overflow-y. The second part requires you to adjust the height of the md-sidenav-container to match the toolbar above. See code example below. In your case you can remove the #leftmenu and #sidenav to match your layout given above.

.example-container {
 width: 100%;
 height: calc(100vh - 64px);
 border: 1px solid rgba(0, 0, 0, 0.5);
 }

<md-sidenav-container fullscreen>
    <md-toolbar color="primary">
    top toolbar
    </md-toolbar>
   <md-sidenav #leftmenu mode="side" opened="true" >
    left menu
   </md-sidenav>

   <md-sidenav-container class="example-container">
      <md-sidenav #content style="width:100%" mode="side" opened>
           Your scrollable content goes here
           <button type="button" md-button (click)="sidenav.open()">Open sidenav</button>
      </md-sidenav>

      <md-sidenav #sidenav align="end">
          My side menu, hidden
      </md-sidenav>
   </md-sidenav-container>
</md-sidenav-container>

score 0 · Answer 2 · edited May 23 '17 at 11:55

I struggled with the same problem a few weeks ago.

Are you using webpack, systemJS or something else ? The workaround I used seems to be unadequate for systemJS (see here angular 2 material container fixed not working) because of specific DOM generated by systemJS (especially iframe ).

In case you are not bound to some specific generated DOM, the easiest workaround is to set css property height: 100% for md-sidenav-container tag and for each of his parent, up to html (in my case, it was html, body, main and then md-sidenav-container).

This trick also fixes position: fixed broken behaviour when used inside md-sidenav-container

EDIT considering the recent suggestion of replacing <md-sidenav-container> by <md-sidenav-layout>, I have to say it is a bad solution as this tag is deprecated and will disappear (if it is not already done) in the next material release, which means if you want to upgrade, at some point, to a final version, all your work about fixed item / sidenav will be gone and you will have to refactor it - and face the same problem as now.

score 0 · Answer 3 · answered Feb 17 '17 at 04:10

I am able to fix my issue by changing md-sidebar-container to md-sidenav-layout

<md-toolbar color="primary" class="md-medium-tall" style="position:fixed; z-index: 10">
  <button class="app-icon-button" (click)="sidenav.toggle()">
    <i class="material-icons app-toolbar-menu">menu</i>
  </button>
  Sample
  <span class="app-toolbar-filler"></span>
  <button md-button routerLink="/home">HOME</button>
  <button md-button routerLink="/contacts">CONTACTS</button>
  <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
</md-toolbar>

<md-sidenav-layout [class.m2app-dark]="isDarkTheme">
  <md-sidenav #sidenav mode="side" class="app-sidenav" style="margin-top: 70px">SideNave</md-sidenav>
  <div style="margin-top: 70px">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>

<span class="app-action" [class.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>add</md-icon></button>
</span>

unable to have md-toolbar fixed at top

3 Answers3