Components: md-toolbar always on top

[ghostofcain]

Is where any way to fix the position of the md-toolbar to the top of the screen so that content scrolling doesn't hide the toolbar?

Many thanks,

[jelbourn]

Somewhat captured by #474

You can also just put the toolbar outside of your app's main scrolling area.

[ashishtyagi10]

I tried all the method mentioned but none of them is working for me

[akashsprakash]

I am having the similar issue. Tried CSS positioning. But none of it works.

[gtzinos]

Hello everybody, use this style

.header-toolbar {
      position: fixed;
      z-index: 2;
}

[johanchouquet]

Based on your answer @gtzinos, this worked for me:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%  !important;
}

This way, the toolbar was truly using 100% of the window width.

[gtzinos]

@dargoan Good job. Thanks!

[cmjunior]

@johanchouquet, your last suggestion realy works to keep the toolbar on top, always visible. The only problem is that it is under my sidenav, and the mais page content. See on the print, if I remove your class, 'fixed-header', it looks ok, but not with fixed toolbar.

My code is:

<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
  <mat-toolbar color="primary" class="fixed-header">
    <!-- ommited -->
  </mat-toolbar>
  <mat-sidenav-container #sidenav style="height:100%;width:100%;" >
    <mat-sidenav mode="side" opened="true" #sidenav style="box-shadow: 0 5px 5px #999;z-index: 1;">        
      <!-- ommited -->
      <div class="inner-sidenav-content">
        <div>
          <router-outlet></router-outlet>
        </div>
      </div>
  </mat-sidenav-container>
</div>

// CSS Styles:
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%  !important;
} 
.inner-sidenav-content {
    overflow: auto;
    position: top;
    bottom:0;
    left:0;
    right:0;
    margin: 10px;
}
mat-sidenav {
    background-color: rgba(228, 228, 228, 0.35);
    color: rgba(0, 0, 0, 0.87);
    min-width:200px;
}

[JTOne123]

@cmjunior Did you find a solution?

[cmjunior]

Yes, I did. I´d just putted a margin top, on sidenav-content, appears to not be the best solution, but solved to me.

<mat-toolbar color="primary" layout="row" style="position: fixed;">
   <button mat-icon-button class="menu-icon">
       <mat-icon (click)="sidenav.toggle()" class="mat-24" aria-label="Menu">menu</mat-icon>
   </button>
   <span>
       <h2>CRZ-APP</h2>
   </span>
   <span class="toolbar-spacer"></span>
   <mat-icon class="toolbar-icon">settings</mat-icon>
 </mat-toolbar>
 <mat-sidenav-container fullscreen style="margin-top: 75px !important;">
   <mat-sidenav #sidenav mode="side" class="sidenav">
     <h4 class="subheader">Menu</h4>
   </mat-sidenav>
   <div class="content">
     <mat-card class="z-depth">
       <mat-card-title>Controle de Pedidos</mat-card-title>
       <mat-card-content>
         Bem vindo! Estamos desenvolvendo este sistema.
       </mat-card-content>
     </mat-card>    
     <div style="padding: 5px;"></div>
     <crz-cliente-form></crz-cliente-form>
   </div>
</mat-sidenav-container>

CSS:

 .mat-toolbar.mat-primary{
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     z-index: 9;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
 }

 .content {
     overflow: auto;
     padding-left: 10px;
     padding-right: 10px;
     height: 100%;    
 }

 .sidenav {
     padding: 20px;
     min-width: 200px;
     background-color: rgba(228, 228, 228, 0.35);
     color: rgba(0, 0, 0, 0.87);
 }

 .toolbar-icon {
     padding: 0 14px;
 }

 .menu-icon {
     margin-left: -15px;
 }

 .toolbar-spacer {
     flex: 1 1 auto;
 }

 .filler-content {
     padding: 60px;
 }

[robsoncombr]

Thank you.

[zukko1]

You are a god @cmjunior

[Nyconing]

Thanks @cmjunior .
Why didn't Google make all of these as template? _(Or they make too complicated and get ignored by peoples?)_

[ramitmathur27m]

Based on your anwser @gtzinos, this worked for me:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%  !important;
}

This way, the toolbar was truly using 100% of the window width.

Thanks , It worked for me too. Appreciated!

[cmjunior]

FYI... the material Navigation Schematic, released on version android version 6, i think, does the job, with almost zero configuration.

I said almost zero configuration, because I needed to set the global margin to 0 on styles.css.

* {
  margin: 0;
}

[TarasoffSergey]

Hello, colleagues.

May be this solution will help to you.

https://stackblitz.com/edit/angular-material-fixed-sidenav?file=app%2Fapp.component.css

[phare2013]

Thanks @gtzinos, this worked for me too!

 .fixed-header {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 2;
   width: 100%  !important;
 }