unable to set the height of a angular/material sidenav to 100%

Issue

I am trying to set the height of a angular/material sidenav to 100%. For some reason it’s set to 22px making it impossible to use as any item in the sidenav fills up the entire height… I managed to get this to work using the mat-sidenav-container fullscreen property however when I do that all other content (which should be next to the sidenav) doesn’t get displayed… Reading through the sidenav documentation I found the following:

“For a fullscreen sidenav, the recommended approach is set up the DOM
such that the can naturally take up the full
space:”

Then they have an example which I’m trying to copy. When I look at my sn-content div inside the mat-sidenav-container’s css styles in chrome I see that height is greyed out for some reason? i’ve copied the selector path from chrome dev tools inspect element and set the height to 100% but still no luck. I also tried using !important but that also didn’t change anything. Any idea what i’m doing wrong/what might be going on here?

My navigation component’s html code:

<mat-sidenav-container position="start">
    <mat-sidenav #sidenav mode="push">
        Navigation component width is ok
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </mat-sidenav>
    <div class="sn-content">
    <button type="button" (click)="sidenav.toggle()">toggle</button>
    </div>
</mat-sidenav-container>

my navigation component’s css:

body > app-root > app-home > navigation > mat-sidenav-container > mat-sidenav-content {
    margin: 0;
    height: 100% !important;
    width: 100%;
}

I then use this navigation component in the following html code:

<navigation></navigation>

        <div fxLayout="column" fxLayoutAlign="end end">
            <div fxFlex="20%">
            <h4>testing angular flex layout turning out to be quite unusual</h4>                
            </div>

        </div>

Solution

Just wanted to post for anyone new travelling here like me….

Not sure if this is a new option or which version of material it was added in, but currently you can simple add [fixedInViewport]=”true” to the mat-sidenav component as well as using [fixedTopGap] and [fixedBottomGap] to optionally allow for any gaps for menu/tool bars.

Documentation here: Angular Material Sidenav API

Also, note that on the mat-sidenav-container component you can add the directive “fullscreen” to expand your content to fit the viewport if you so wish. The overlay for push and over modes only shows over the content, so if it doesn’t fit the whole viewport then neither will your overlay.

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav 
                 [fixedInViewport]="true" 
                 mode="push">
        This is the sidenav, yay
    </mat-sidenav>
    <mat-sidenav-content>
        This is the content section
        <button mat-button
                (click)="sidenav.toggle()">Toggle sidenav</button>
    </mat-sidenav-content>
</mat-sidenav-container>

Answered By – Dillon

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.