Angular Material 2 Tabs with fixed (sticky) tab labels

2
votes

I have a layout using Angular Material 2 mat-sidenav layout with a mat-tab layout in the mat-sidenav-content section. I am trying to make the mat-tab-labels sticky so they are always visible, and still allow the dynamic tab-content to scroll. I can get the labels to stay fixed by setting overflow: hidden on the mat-sidenav-content and then set overflow: scroll on the mat-tab-body-wrapper element, but I have to set a fixed height to get the tab-content to scroll, but I have dynamic content so a fixed height isn't an option. Is there a way I can get my sticky labels and scrolling too without setting a fixed height?

Below is a demo. Shrink the vertical height of your window until it covers part of the "Large content" div. It will not scroll. Then uncomment the mat-tab-group css that sets a height and it will scroll as desired (but a fixed height).

https://stackblitz.com/edit/angular-rty6oe?file=app%2Fsidenav-fixed-example.css

UPDATE

Ok, @Dakota Maker's answer solved the immediate problem, and also reminded me of what I was originally trying to fix that brought me to the point of not being able to scroll. I updated my example app to reflect my real app better. I have a sub-header inside the sidenav-content area that sits above the mat-tab-group, and when scrolling it never gets to the bottom unless the window height is large enough because the header seems to have pushed the content down and off the screen. I can add a margin to the bottom of the content to compensate for the sub-header, but the sub-header area height can change.

If I should accept the answer to the original question and open a new question, please advise.

1
cssangular-material2

1 Answers

3
votes

Set height:100% one the mat-tab-groups and you will be able to scroll and there won't be a big white block in the middle of the large content

EDIT TO ACCOMPANY OP's UPDATE:

You can add something like bottom:12px to the .mat-tab-body-wrapper to give it a fixed amount of space at the bottom. This will end up giving you some of the overflow at the top of the wrapper some overlap with where the tabs are at, but you should be able to work that out also adding in something like margin-top:12px to the same block. Hope this helps out!