Angular Material 2 Scrolling Inside Mat Tab

Question

I want to have a sidenav that has some buttons on top and tabs below that contain different data. I want to make the inside of the tabs scroll so that the buttons on top never go out of view, so that my users are not scrolling up when they want to use one of the buttons.

Here is an example: https://stackblitz.com/edit/angular-wdjfaa

As you can see in the example, when you open the drawer nothing scrolls. In the styles.scss I have added

.mat-drawer {
    overflow-y: unset!important;
}

So that the whole drawer doesn't scroll. The only way I have been able to get it to scroll is to set a fixed pixel heigh for the tab body, which I don't want to do because I need that to have a 100% height.

Anyone got any ideas?

Thanks!

Answer 1

I just changed it to scroll and it appears to have worked:

.mat-drawer {
    overflow-y: scroll
}

Is this what you were trying to accomplish? https://stackblitz.com/edit/angular-wdjfaa-w7vurx

Answer 2

Try using sticky property in css. Add the following class to you styles.scss

.mat-tab-header {
    z-index: 9999;
    position: sticky;
    top: 0px;
    background-color: white;
}