Fixed header using angular material and flex layout

angular angular-material angular-flex-layout

13,086

Solution 1

just copy and paste this code instead of yours and let me know what happening :(

<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"><span class="span">Rockefeller FY 2009</span></h2>
</mat-toolbar>    

<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"> <span class="span">AUG-SEP</span></h2>
</mat-toolbar>    

<mat-toolbar *ngIf="showmenu.visible1"  fxLayout="column" fxLayoutAlign="space-around start" 
              style="background: darkblue;height: 3vh;">
    <h6>Web-Based Space Survey Application </h6>
</mat-toolbar>


<mat-divider></mat-divider> 

    <div fxShow="true" fxHide.lt-md="true">
    <mat-toolbar class="basic" color="basic" *ngIf="showmenu.visible1" fxLayout="row" fxLayoutAlign="space-evenly start" >        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
    <mat-nav-list >
        <button mat-raised-button  routerLink='Espace/home' routerLinkActive="active" >
    <mat-icon>home</mat-icon><br/>HOME</button>

    <button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon>explore</mat-icon><br/>SPACE SURVEY</button>

        <button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'>
    <mat-icon>account_box</mat-icon><br/>SPACE ADMIN</button>

        <button mat-raised-button  >
    <mat-icon>assignment</mat-icon><br/>REPORTS</button>

        <button mat-raised-button  >
    <mat-icon>supervisor_account</mat-icon><br/>JOINT USE</button>

    <button mat-raised-button >
    <mat-icon>help_outline</mat-icon><br/>HELP</button>

        </mat-nav-list>
    </mat-toolbar>
    </div> 
    <div  *ngIf="showmenu.visible1" fxShow="true" fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="start none" 
      style="font-weight: bold;font-size: 18px;color: darkblue;padding: 15px 0 0 5px; ">MENU

      <a  (click)="sidenav.toggle()"><mat-icon  style="-webkit-text-fill-color:darkblue;padding: 0 0 0 1px; ">keyboard_arrow_right</mat-icon> </a>

    </div>
  <div>
  <mat-sidenav-container fxFlexFill class="example-container" >
    <mat-sidenav #sidenav fxLayout="column">
    <div fxLayout="column" fxLayoutAlign="center start">
    <mat-nav-list >

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">home</mat-icon><p class="tabs">HOME<p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">explore</mat-icon><p class="tabs">SPACE SURVEY</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">account_box</mat-icon><p class="tabs">SPACE ADMIN</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">assignment</mat-icon><p class="tabs">REPORTS</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">supervisor_account</mat-icon><p class="tabs">JOINT USE</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">help_outline</mat-icon><p class="tabs">HELP</p></a>

    <a mat-list-item  (click)="sidenav.toggle()" >
    <mat-icon  style="-webkit-text-fill-color:red;font-size: 18px;font-weight: bold; padding-left: 3px;">keyboard_arrow_left</mat-icon></a>    
    </mat-nav-list>
      </div>
    </mat-sidenav>      
  <mat-toolbar *ngIf="showmenu.visible1" style="height:1vh;background: darkblue;"></mat-toolbar>
 <div style="overflow: auto;  position: absolute;  bottom:0;  left:0;  right:0;  top:64px;">
  <div style="padding-top:2em;padding-bottom:2em;">
  <router-outlet></router-outlet>
  </div>
  </div>      
  </mat-sidenav-container>

Solution 2

It can be done as follow:

.toolbar {
   background-color: mat-color($nga-background, card);
   position: sticky;
   position: -webkit-sticky; /* For macOS/iOS Safari */
   top: 0; /* Sets the sticky toolbar to be on top */
   z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
 }

13,086

Author by

Heena

Updated on June 26, 2022

Comments

Heena about 2 years

I am working with Angular 2 app using angular material and angular flex layout.I have created in my application a login form and a header which is only visible after login in my home page.

In my app.component.html I have added my header and applied the below style to get it fixed while scrolling.

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">

In my home page I have added a mat-toolbar component,mat-card component and mat-sidenav component.

After logging in the app, when I scroll the homepage content is overlapping my fixed header and my header is getting covered with the home page content.

Below shown is my app.component.html

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">
<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"><span class="span">Rockefeller FY 2009</span></h2>
</mat-toolbar>


<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"> <span class="span">AUG-SEP</span></h2>
</mat-toolbar>


<mat-toolbar *ngIf="showmenu.visible1"  fxLayout="column" fxLayoutAlign="space-around start" 
              style="background: darkblue;height: 3vh;">
    <h6>Web-Based Space Survey Application </h6>
</mat-toolbar>


<mat-divider></mat-divider> 

    <div fxShow="true" fxHide.lt-md="true">
    <mat-toolbar class="basic" color="basic" *ngIf="showmenu.visible1" fxLayout="row" fxLayoutAlign="space-evenly start" >        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
    <mat-nav-list >
        <button mat-raised-button  routerLink='Espace/home' routerLinkActive="active" >
    <mat-icon>home</mat-icon><br/>HOME</button>

    <button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon>explore</mat-icon><br/>SPACE SURVEY</button>

        <button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'>
    <mat-icon>account_box</mat-icon><br/>SPACE ADMIN</button>

        <button mat-raised-button  >
    <mat-icon>assignment</mat-icon><br/>REPORTS</button>

        <button mat-raised-button  >
    <mat-icon>supervisor_account</mat-icon><br/>JOINT USE</button>

    <button mat-raised-button >
    <mat-icon>help_outline</mat-icon><br/>HELP</button>

        </mat-nav-list>
    </mat-toolbar>
    </div> 
    </div>
    <div *ngIf="showmenu.visible1" fxShow="true" fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="start none" 
      style="font-weight: bold;font-size: 18px;color: darkblue;padding: 15px 0 0 5px; ">MENU

      <a  (click)="sidenav.toggle()"><mat-icon  style="-webkit-text-fill-color:darkblue;padding: 0 0 0 1px; ">keyboard_arrow_right</mat-icon> </a>

    </div>

  <mat-sidenav-container fxFlexFill class="example-container" >
    <mat-sidenav #sidenav fxLayout="column">
    <div fxLayout="column" fxLayoutAlign="center start">
    <mat-nav-list >

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">home</mat-icon><p class="tabs">HOME<p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">explore</mat-icon><p class="tabs">SPACE SURVEY</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">account_box</mat-icon><p class="tabs">SPACE ADMIN</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">assignment</mat-icon><p class="tabs">REPORTS</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">supervisor_account</mat-icon><p class="tabs">JOINT USE</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">help_outline</mat-icon><p class="tabs">HELP</p></a>

    <a mat-list-item  (click)="sidenav.toggle()" >
    <mat-icon  style="-webkit-text-fill-color:red;font-size: 18px;font-weight: bold; padding-left: 3px;">keyboard_arrow_left</mat-icon></a>

    </mat-nav-list>
      </div>
    </mat-sidenav>


  <mat-toolbar *ngIf="showmenu.visible1" style="height:1vh;background: darkblue;"></mat-toolbar>

  <router-outlet></router-outlet>

  </mat-sidenav-container>

app.component.css

.mat-toolbar{
  height: 5vh;
}

.basic{
    height: 12vh;
}

.span{
   font-family:Georgia, serif;
     font-style:Italic;
     font-size:20px;
}

h6{
    color:white;
    font-size:12px;
    font-weight:bold;
    font-family: Verdana, sans-serif;
}

.mat-raised-button{
    border-radius:20px;
    max-height:10vh;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: #6A5ACD;
}

.mat-icon {
    transform: scale(1.5);
}

.mat-sidenav{
    background: darkblue;
}

.tabs{
    padding-left: 5px;
    color: white;
    font-size: 12px;
    font-family:  Verdana, sans-serif;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import {ShowmenuService} from './showmenu.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {
  title = 'app';
  isprofile=false;
  constructor(private _router:Router, public showmenu: ShowmenuService){}

  ngOnInit(){

    this._router.navigate(['login']);

  }


}

Can anybody please help me in proper implementation of my fixed header?

Heena about 6 years

just need to increase the value top:130px; in the line ..... <div style="overflow: auto; position: absolute; bottom:0; left:0; right:0; top:64px;">
Ramesh Rajendran about 6 years

@Heena if you increase it to top:130px;. then it is working??
Heena about 6 years

for my header i increased it to top:160px; but the problem is ... this div is also applied to my login page and my login form is pushed down by 160px downwards..
Heena about 6 years

i need to apply this div only to my app.component.html page as i did with mat-toolbar in the line................<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
Heena about 6 years

but when i apply *ngIf="showmenu.visible1" to my div tag, i am unable to see my login page ... even i am not getting any errors..