粘式表标头在角形材料中不起作用mat-sidenav-container [英] Sticky table header doesnt work in angular materials mat-sidenav-container

问题描述

嘿，

使用棱角材质时，我在使用html/css表和粘性标题时遇到了麻烦.

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

在我的项目中，我将棱角材质sidenav与<mat-sidenav-container>，<mat-sidenav>和<mat-sidenav-content>一起使用.在<mat-sidenav-container>内部，表的粘贴标头不起作用.

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.

我在github上创建了一个小项目来轻松重现该问题:
回购: https://github.com/ManticSic/angular-material-sticky-表问题
GH页面: https://manticsic.github.io/angular-material- sticky-table-issue/

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/

表格标题向下移动64像素，而不是在滚动时固定为y = 64像素.

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?

欢呼声和敬意

注释

• 如果标头粘贴/固定在页面顶部，那没关系，因为当我在需要此视图的地方使用此视图时，仅显示一个表.但是我需要具有正确宽度的适当列.
• 希望我的问题可以在不使用JavaScript的情况下解决
• 该解决方案必须在最新版本的Firefox，铬/铬，野生动物园和三星移动浏览器中工作

无效的解决方案

在app-table-header上的
• position:fixed并从单元格中删除position:sticky: 不起作用，因为列宽不正确

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

推荐答案

删除/覆盖mat-sidenav-container和mat-sidenav-content的溢出属性将解决此问题

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

如果未设置Angular Material，它将自动生成mat-sidenav-content.

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

navigation.component.sass

navigation.component.sass

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

向所有访问此问题的人致谢！

thx to all who visited this question!

这篇关于粘式表标头在角形材料中不起作用mat-sidenav-container的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！