首页 文章

粘性表头不适用于角形材料mat-sidenav-container

提问于
浏览 次
0

Heyho，

使用角度材质时，我在使用html / css表和粘性 Headers 时遇到了一些麻烦 .

在我的项目中，我使用了带有 <mat-sidenav-container> ， <mat-sidenav> 和 <mat-sidenav-content> 的角度材料sidenav . 在 <mat-sidenav-container> 里面，表格的粘性 Headers 不起作用 .

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

表头向下移动64px，而不是在滚动时固定在y = 64px .

你知道我怎么解决这个问题吗？

干杯和thx

Notes

  • 没关系，如果 Headers 粘贴/固定在页面顶部，因为当我使用此视图时，我只需要显示一个表格 . 但我需要具有正确宽度的适当柱子 .

  • 我希望我的问题可以用JavaScript解决

  • 该解决方案必须适用于最新版本的firefox，chrome / chromium，safari和samsung移动浏览器

Not Working Solutions

在app-table-header上

  • position:fixed 并从单元格中删除 position:sticky ：不起作用，因为colum-width不正确
css angular html-table angular-material sticky

2 回答

  • 0

    使用位置：固定而不是粘性和宽度：100％希望这会有所帮助 .

    例如：

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

    我已经为app-table-header添加了相同的表格背景颜色，所以看起来会更好 .

    回复于
  • 0

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

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

    navigation.component.sass

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

    感谢所有访问过这个问题的人！

    回复于

相关问题