CODEWITHSUNDEEP
cssangularscrollangular-materialtabs
an0nym0use
an0nym0use

Reputation: 341

How to stop content scrolling over mat-tabs, when tabs are fixed

I need mat-tabs to stick to the top, I went through this Stackoverflow anwser, and fixed the tabs on top by adding this to the css:

:host ::ng-deep .mat-tab-header {
   position: fixed;
}

This works for fixing the tabs but, now the content flows over the tabs. Is there a way to fix this?

Stackblitz link for the problem. Please let me know if there is another way to stick the tabs on top or make the content not scroll on to the tabs.

Thank you.

Upvotes: 1

Views: 1266

Answers (1)

True Jarod
True Jarod

Reputation: 11

You can just add background color + z-index: 1111 if I understood your question correctly.

:host ::ng-deep .mat-tab-header {
   position: fixed;
   background: white;
   z-index: 1111;
}

Upvotes: 1

Related Questions