Why can't i make the mat-tab-group-header sticky

Question

How can I go about making the header for the mat-tab-group sticky. I have tried solution that just don't work. I Tried This

<div class="columns">
<div class="column">
<mat-tab-group>

<mat-tab label="Tab1"></mat-tab>
<mat-tab label="Tab2"></mat-tab>


</mat-tab-group>



</div>

</div>

In CSS I used

::ng-deep .mat-tab-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

::ng-deep .mat-mdc-tab-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

This does not work at all. probably the header is not sticky.

Answer 1

'sticky' requires the element's ancestor to have a fixed height:

enter image description here

You can find out how to assign the height to your 'MatTabGroup' dynamically. For a basic test you can do:

On component:

export class myTabGroupComponent {
    
  public groupHeight = "800px";
  constructor(){
  ...

On Template:

<mat-tab-group mat-stretch-tabs="false" [style.height]="groupHeight" >
        <mat-tab label="First" style="position: sticky;top: 0;">