How to get this template in Angular Material?

Question

I am trying to get this template style in my Angular app:

----------------------------------------------------
               FIXED HEADER
----------------------------------------------------
  S   |
  I   |
  D   |
  E   |
  N   |           MAIN SCROLLABLE AREA
  A   |
  V   |
      |
      |
      |

In this template the header is always visible on the top (fixed) and the main area is scrollable independently from the sidenav.

I know what Angular components I have to use, but I dont know what css styles apply to get the desired result.

I tried the following:

.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
}

With this CSS I obtain the desired result in the fixed header but the rest of the content gets overlaped by the header. If I apply a margin-top to sidenav and main area I can fix this overlapping but playing around with the margin-top px it does not seem to be the right way to do it.

The app code:

In app.component.html I use two custom components:

<mt-toolbar></mt-toolbar>
<mt-sidenav></mt-sidenav>

The mt-toolbar component:

The html

<mat-toolbar class="mat-elevation-z4" color="primary" class="fixedHeader">
    TITLE
</mat-toolbar>

The CSS

.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
 }

The mt-sidenav component:

The html

<mat-sidenav-container>
    <mat-sidenav mode="side" opened disableClose>
        <mat-nav-list>
          SIDENAV ITEMS
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
         ## MAIN SCROLLABLE AREA ##
    </mat-sidenav-content>
</mat-sidenav-container>

You should add more code. Give us the app as it currently stands and we'll be able to see the problem much quicker. — Rick van Lieshout
But a top margin (or if you want, top padding) is the standard way of positioning main content below a fixed header. Now sure what better way you expect. Well, you can position the main content relatively of course. — Mr Lister
It is possible to calculate that top margin automatically based on the height of the toolbar, without specifying it "by hand"? — Juan

alsami alsami · Accepted Answer · 2018-02-21T09:07:37

You have to place the mat-toolbar above the mat-sidenav-container (or mat-drawer-container) and set the mat-sidenav input fixedInViewport to true + set fixedTopGap to 64px when the width of the window is >= 600px otherwise 56px.

The class is not necessary then, it will always be above the scrollable content, so it doesn't need position: fixed;. For the mat-elevation-z4 to work indeed you need to set it to position: relative; and z-index: 1;

To observe the width of the window I am using @angular/flex-layout and the ObservableMedia service of it. You could also overwrite the mat-toolbars height to always have a height of 64px for instance.

Here is an example where I have implemented it.

Edit: Here is a simple example on stackblitz.

How to get this template in Angular Material?

1 Answers