angular material - How to have scrolling after mat-toolbar

Question

I have mat-toolbar, so here i want the scrolling on the page to happen after mat-toolbar. so that mat-toolbar remains as fixed header. So that even if i scroll down i see the toolbar.

<mat-toolbar style="flex: 0 0 128px;" color="primary">
        <button mat-icon-button aria-label="Back" routerLink="/reports">
            <mat-icon>arrow_back</mat-icon>
        </button>
        <mat-card-title>Upload Report</mat-card-title>
    </mat-toolbar>
<div>
//other form elements
</div>

question from:https://stackoverflow.com/questions/65560024/how-to-have-scrolling-after-mat-toolbar

Answer 1

Wrapping the toolbar and the other content in a CSS grid - having 100% height - will work, making both a grid row where the toolbar has auto height and the other content has overflow:auto.

<div class="container">
    <mat-toolbar>
        <h1>
            Fixed Angular Material toolbar
        </h1>
    </mat-toolbar>
    <main>
        <p>
            This is the main content which is scrollable because the main content has 'overflow-y: auto' and is a grid row
            with a height of 1fr (the container is a CSS grid). This only works when the container div has a height of 100%.
        </p>
    </main>
</div>

.container {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr; // mat-toolbar main
}

/* Grid row 1 */
mat-toolbar {

}

/* Grid row 2 */
main {
    overflow-y: auto;
    padding: 1rem;
}

Here is a working example: https://www.jitblox.com/design/MdTqMjv9Pr