Question 412993 in Html Question posted in
Some basic documentation can be found here.

Html – How to make headers of <mat-tab-group> sticky / fixed on top? (Angular Material 18)

I have the following code:

<div class="flex-auto overflow-y-auto">
        <mat-tab-group
            [animationDuration]="'0'"
            headerPosition="below"
            mat-stretch-tabs="false"
        >
            <div cdkScrollable>
                <!-- Tab #1 -->
                <mat-tab label="List 1">
                    <!-- TAB CONTENT GOES HERE -->
                    <app-leads></app-leads>
                </mat-tab>

                <!-- Tab #2 -->
                <mat-tab label="List 2">
                    <!-- TAB CONTENT GOES HERE -->
                    <inventory-list></inventory-list>
                </mat-tab>
            </div>
        </mat-tab-group>
    </div>

This produces the following:
The result of the code above

The issue is whenever content within tabs moves up or down, the headers of tab group is not visible (not sticky).

How can it be resolved?

Tags:

2

Answers


  1. 0

    Use css sticky properties "position: sticky"

    Login or Signup to reply.
  2. 0

    I now found the "issue". There is a lot of overflow: hidden on mat-tab-body-*

    .tab-custom-overflow .mat-tab-body-wrapper {
    overflow: visible !important;
}
.tab-custom-overflow .mat-tab-body-active {
    overflow: visible !important;
}
.tab-custom-overflow .mat-tab-body-content {
    overflow: visible !important;
}
    <mat-tab-group class="tab-custom-overflow">
 ...
</mat-tab-group>

    this will change all the overflow: hidden to visible in mat-tab-body

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search