Search code examples
htmlcssangularmat-tablemat-tab

Mat-Table overlapping menu above when scrolling

I've got a mat-toolbar placed above a mat-table inside a mat-tab, I'd like to keep the toolbar and the table headers visible at all times, however, when I scroll down the page, the toolbar becomes overlapped with the table. The headers scroll up to the top of the mat-tab and I can't seem to get the table headers to stop at the bottom of the mat-toolbar.

Looking around, people have suggested using the sticky position css property, which works to keep my toolbar visible, but the table headers still overlap. I'm not sure how to fix this. Example below:

Image of header position before scroll Image of header position before scroll

Image of header position after scroll Image of header position after scroll

Layout

<mat-tab-group>
    <mat-tab>
        <div fxLayout="column">
            <mat-toolbar fxLayout="row" fxLayoutAlign="start space-between" ngClass="table-toolbar sticky-top">
                ....BUTTONS....
            </mat-toolbar>
            <div fxLayout="column">
                <table mat-table [dataSource]="dataSource">
                    ....TABLE....
                    <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
                    <tr mat-row *matRowDef="columns: columns;"></tr>
                </table>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>

Styles

.table-toolbar {
    height: 80px !important;
    padding-left: 24px !important;
    min-height: 80px !important;
}

.sticky-top {
    top: 0 !important;
    z-index: 1000 !important; // This only makes it appear above or below the table
    position: sticky;
}
Solution

  • You could try overriding the mat-table header top position. Normally it is set to 0, You could override to the pixels you need. Here is the example. https://stackblitz.com/angular/glmqladoole 

    .mat-table-sticky{
  top:80px !important;

}