Home > OS >  Angular - Sidenav Content Has No Scroll Bar
Angular - Sidenav Content Has No Scroll Bar

Time:03-01

I'm using a sidenav in my Angular app and set the router-outlet as my sidenav-content, doing it this way I dont have a scroll bar in the sidenav-content even though I have components that overflow the Y axis.

I'm still able to scroll the page and eveything is fine, I just find annoying that I don't have a scroll bar.

What could I do to fix this?

app.component.html

<mat-sidenav-container autosize >
    <mat-sidenav #sidenav mode="side" opened="true">
        <mat-nav-list>
            ...
        </mat-nav-list>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
</mat-sidenav-container>

CodePudding user response:

try putting your router-outlet inside a div, then on your css:

.sampleDivClass {
  overflow-y auto
}
``

CodePudding user response:

if the entire page is scrolling when you just wanted the sidenav content to be scrollable you can try setting the overflow of the container hidden and set the overflow of only the sidenav content to auto

  • Related