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

2
votes

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>
3
csshtmlangularangular-material
Try Using this: <mat-sidenav-container class="custom-sidenav-container"> .custom-sidenav-container{ position: inherit; height: 100%; display: inherit; transform: inherit; } – user1594
@user1594 what does that mean? – user2094257
Can you try above CSS styles for mat-sidenav-container – user1594
@user1594 Thanks that worked. Please explain why this works in your answer... – user2094257
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 – user1594

3 Answers

19
votes

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>
4
votes

In navigation component css:

::ng-deep .mat-sidenav-container{
  height:100vh !important; /* or 100% */
}
1
votes

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; 
}