Make sticky header on mat-tab-group

Question

I'm using mat-tab-group and I want the tab headers to be fixed when I scroll down to the content. So, I fixed the height of tab content. I'm able to scroll through the content with fixed header. But, then I see two scroll bars on the page which is weird. Is there any other way that I can fix the tab headers while scrolling through the content? Attaching the snippet:

<mat-tab-group>
  <mat-tab label="Tab 1">
    <div style="overflow: scroll; height: 50%">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </mat-tab>
  <mat-tab label="Tab 2">Tab 2</mat-tab>
  <mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>

[Edit]: I'm more of looking to make header of mat-tab fixed. So, is there any straight forward way to do it instead of fixing height in styles?

You can add style to the body of that page like your code here — Shubham, Jan 18 '21 at 17:53
@Shubham Is that a good idea? Because, keeping overflow hidden on body will reflect on whole application in angular. — Eranki, Jan 19 '21 at 05:25

score 10 · Answer 1 · answered May 10 '21 at 19:40

app.component.html

<mat-tab-group>
  <mat-tab label="Content 1"> Content </mat-tab>
  <mat-tab label="Content 2"> Content </mat-tab>
  <mat-tab label="Content 3"> Content </mat-tab>
</mat-tab-group>

app.component.scss

:host ::ng-deep .mat-tab-header {
    top: 0;
    z-index: 1000; 
    position: sticky;
    position: -webkit-sticky; /* macOS/iOS Safari */    
}

score 0 · Answer 2 · answered Jan 19 '21 at 06:18

0

Change overflow style, like:

<div style="overflow-x: auto; overflow-y: visible; height: 50%">

So, horizontal scroll will be visible only if needed, and the vertical won't appear.

answered Jan 19 '21 at 06:18

Nimer Awad

3,967
3
17
31

Make sticky header on mat-tab-group

2 Answers2