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

Question

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 1

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>

Solution 2

In navigation component css:

::ng-deep .mat-sidenav-container{
  height: 100vh !important;
}

Solution 3

Given this markup:

 <mat-sidenav-container class="custom-sidenav-container">

The following stylesheet will solve your issue:

.custom-sidenav-container { 
    position: inherit;
    height: 100%;
    display: inherit;
    transform: inherit; 
}

Comments

[divyameher]

Try Using this: <mat-sidenav-container class="custom-sidenav-container"> .custom-sidenav-container{ position: inherit; height: 100%; display: inherit; transform: inherit; }

[user2094257]

@user1594 what does that mean?

[divyameher]

Can you try above CSS styles for mat-sidenav-container

[user2094257]

@user1594 Thanks that worked. Please explain why this works in your answer...

[divyameher]

I have tried with all CSS combinations Finally this is what I got solution in my application. Hope I thought this try can work for you as well

[user2094257]

@user1594 thanks a lot for the help. I still really would like to know why this sidenav doesn't work as intended from the start.

[divyameher]

But I think still sidenav will not occupy full height when when there is scrollable content in main page. Let me know if you get any solution for that

[divyameher]

That might be due to some CSS overriden in your application

[user2094257]

why is that necessary?

[Vega]

you mean ::ng-deep?

[user2094257]

I mean the entire statement? Why does this work/why doesn't the sidenav work as expected from the start/

[FirstVertex]

fullscreen directive is a nice trick. Where is the documentation for that?

[Dillon]

@HDog I honestly don't remember where I found that as this post is fairly old, but I remember that I couldn't find it in any documentation either.

[Rafsanjani]

fullscreen directive is not even recognized by intellij as a valid directive even though It worked perfectly.

[itsji10dra]

Mentioned here: github.com/angular/components/blob/…