How do I avoid the mat-options to render over a fixed mat-toolbar header when scrolling?

Issue

I'm new to angular and I'm trying to implement a layout where I have a toolbar/header that I want to be fixed at the top of all components. And all the other components (including the router-outlet) to render under that toolbar/header.

But if I use a mat-autocomplete, open the options, don't select any option and scroll the page to the bottom the mat-autocomplete options are rendered over the header, not under it like all the other content.

MatOptions rendered over the MatToolbar

I tried setting the z-index of the toolbar to 2000, because the z-index of the autocomplete options are 1000. But I'm still getting the options rendered over the header and not under it.

The problem can be reproduced here: https://stackblitz.com/edit/angular-material-autocomplete-zvys8y?file=app%2Fautocomplete-overview-example.html

How can I avoid this?

Solution

You should be able to accomplish this by moving the mat-header outside of the mat-sidenav-container

<mat-toolbar color="primary" class="position-fixed text-start">
 ...
</mat-toolbar>

<mat-sidenav-container>
 ...
</mat-sidenav-container>

https://stackblitz.com/edit/angular-material-autocomplete-jokcqx?file=app%2Fautocomplete-overview-example.html

Answered By - robbieAreBest