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 !important;
    top: 0px;
    background-color: white !important;
}

Answer 3

In angular 6.0 and above you might want to use the following

.mat-drawer-container { height: auto !important; }

Answer 4

.mat-tab-body-content {
  height: auto !important;
}

Answer 5

there need several css rules to make tabs scrollable:

mat-tab-group {
  .mat-tab-header {
    .mat-tab-header-pagination {
      display: none !important; // <== disable pagination
    }
    .mat-tab-label-container {
      left: 0px; // if you need to use it on mobile - set left position to 0
      width: 100%;
      .mat-tab-list {
        overflow-x: auto !important; // <== set horisontal scroll bar imperatively
        // below rule prevents sliding of buttons' container - because it not sliding properly - to left it not slide as well
        transform: none !important;
        .mat-tab-labels {
          justify-content: unset !important; 
        }
      }
    }
  }
}

if you want to auto-scroll tabs while click on them see full solution there https://stackoverflow.com/a/62031767/9026103