Angular router-outlet content overlaid on top of mat-toolbar

Question

In my app.component.html, I placed a mat-toolbar above a router-outlet like so:

<mat-toolbar color="primary">
  <span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>

The problem is the router-outlet content is overlaid on top of the toolbar. This content should be beneath the toolbar. How should I correct this? I tried placing things inside block elements such as div to no avail. There is also this CSS on mat-toolbar: mat-toolbar { position: fixed }

Answer 1

You should use CSS in the styles.css to put a margin-bottom equals to the height of the toolbar in itself. Also use an ID so it won't apply to other toolbars

mat-toolbar#over-router {
    margin-bottom: 40px; // check the actual height in the browser
}

Answer 2

You can use flex layout.

<div class="home-main">
     <app-toolbar></app-toolbar>
     <div class="home-container">
         <router-outlet></router-outlet>
     </div>
</div>

.home-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

Answer 3

Got it to work using some CSS on my toolbar:

mat-toolbar {
  position: fixed;
  top: 0;
  z-index: 1;
}