Angular Material fixed side bar header not a fixed

1
votes

Im tried to crate Angular material Fixed side nav , but I face some conflict on my projects, My issue is side bar header not fixed, i added content details and scrolls the content then header is hide,

Stack blitz code here

how can I fix this issue please help me to fix this one

Thanks.

My code

sidenav-fixed-example.html

 <mat-toolbar class="example-header">Header</mat-toolbar>

  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened class="example-sidenav">
    <mat-nav-list>
      <!-- Sidebar -->
      <ul class="sidebar navbar-nav" >
        <div class=" fixed-search " >
          <div class="sidebar-date-and-time">


      <span class="side-mnu" routerLink='/home'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
           <div class="p-2 bd-highlight txt-sm">Home</div>
              </div>
                 </span>


            <span class="side-mnu-active"  routerLink='/categories'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
           <div class="p-2 bd-highlight txt-sm">Categories</div>
              </div>
                 </span>



            <span class="side-mnu" routerLink='/customerdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
           <div class="p-2 bd-highlight txt-sm ">Customers</div>
              </div>
                 </span>


            <span class="side-mnu" routerLink='/orderdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
           <div class="p-2 bd-highlight txt-sm">Orders</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
           <div class="p-2 bd-highlight txt-sm">Sales Items</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
           <div class="p-2 bd-highlight txt-sm">Announcements</div>
              </div>
                 </span>

          </div>


        </div>
        <!--side bar-->

      </ul>

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

    <mat-sidenav-content >

     Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
    </mat-sidenav-content>
  </mat-sidenav-container>

  <mat-toolbar class="example-footer">Footer</mat-toolbar>

.css

.example-container {
  position: absolute;
  top: 60px;
  bottom: 60px; height: 100%;
  left: 0;
  right: 0;
}

.example-sidenav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  background: rgba(255, 0, 0, 0.5);
}

.example-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.example-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
3
angularangular-materialangular6

3 Answers

2
votes

As stated by @Deepu in his answer, adding z-index:2 will make sure that the header remains on top of the sidenav.

However it will create an issue if the Links in sidenav are more than what it can accommodate. So calculating the height of the sidenav is a better choice along with setting the z-index.

To achieve it, just add height: calc(100% -120px); in .example-container class. I'm deducting 120px from 100% height because that's the sum of height of Header and height of footer.

Here is the working stackblitz demo and code link.

1
votes

You have to set fixedInViewPort property.

[fixedInViewport]="true" 

<mat-sidenav #sidenav mode="side" opened class="example-sidenav"  [fixedInViewport]="true" >
1
votes

Give z-index value as 2 for class example-header

.example-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
}

stackblitz link