Sticky table header doesnt work in angular materials mat-sidenav-container

2
votes

Heyho,

I have some trouble with html/css tables and sticky headers when using angular material.

In my project I use angular materials sidenav with <mat-sidenav-container>, <mat-sidenav> and <mat-sidenav-content>. Inside <mat-sidenav-container> the sticky header of tables doesn't work.

I created a small project on github to easily reproduce the issue:
Repo: https://github.com/ManticSic/angular-material-sticky-table-issue
GH Pages: https://manticsic.github.io/angular-material-sticky-table-issue/

The table header is moved 64px downwards, instead of being fixed at y=64px when scrolling.

Do you have any idea how i can fix this?

Cheers and thx

Notes

  • It would be okay, if the header is sticked/fixed to the top of the page, because only a table is displayed when I use this view where I need this. But I need proper columns with the correct width.
  • I hope my problem can be fixed w/o JavaScript
  • The solution has to work in the latest versions of firefox, chrome/chromium, safari and samsung mobile browser

Not Working Solutions

  • position:fixed on app-table-header and removing position:sticky from cells: Not working, because the colum-width is not correct
2
cssangularhtml-tableangular-materialsticky

2 Answers

6
votes

Removing/overriding overflow properties of mat-sidenav-container and mat-sidenav-content will fix the issue

Angular Material will auto generate mat-sidenav-content if its not set.

navigation.component.sass

mat-sidenav-container, mat-sidenav-content
  overflow: initial

thx to all who visited this question!

0
votes

Use position:fixed instead of sticky along with width:100% hope this will help.

for example:

app-table-header {
    font-size: 1.2em;
    font-weight: 700;
    position: fixed;
    top: 64px;
    z-index: 10;
    width: 100%;
    background: #fafafa;
}

i have added same table background color for app-table-header so it will look better.