Липкий заголовок таблицы не работает в угловых материалах mat-sidenav-container - PullRequest
Новая
       29

Липкий заголовок таблицы не работает в угловых материалах mat-sidenav-container

0 голосов
/ 21 сентября 2018

Heyho,

У меня проблемы с таблицами html / css и закрепленными заголовками при использовании угловых материалов.

В моем проекте я использую угловые материалы sidenav с <mat-sidenav-container>, <mat-sidenav>и <mat-sidenav-content>.Внутри <mat-sidenav-container> липкий заголовок таблиц не работает.

Я создал небольшой проект на github, чтобы легко воспроизвести проблему:
Репо: https://github.com/ManticSic/angular-material-sticky-table-issue
GH Страницы: https://manticsic.github.io/angular-material-sticky-table-issue/

Заголовок таблицы перемещается на 64 пикселя вниз, вместо того, чтобы фиксироваться при y = 64 пикселя при прокрутке.

У вас есть идеи, как я могу это исправить?

Приветствия иthx

Примечания

  • Было бы хорошо, если бы заголовок был прикреплен / зафиксирован в верхней части страницы, потому что только таблицаотображается, когда я использую этот вид, где мне это нужно.Но мне нужны правильные столбцы с правильной шириной.
  • Я надеюсь, что моя проблема может быть решена без JavaScript
  • Решение должно работать в последних версиях Firefox, Chrome / Chromium, Safari.и мобильный браузер Samsung

Не рабочие решения

  • position:fixed в заголовке приложения-таблицы и удаление position:sticky из ячеек: Не работает, потому что ширина столбца неверна

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Удаление / переопределение свойств переполнения mat-sidenav-container и mat-sidenav-content решит проблему

Angular Material будет автоматически генерировать mat-sidenav-content, если он не установлен.

navigation.component.sass 

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

спасибо всем, кто посетил этот вопрос!

0 голосов
/ 21 сентября 2018

Использовать положение: исправлено, а не закреплено вместе с шириной: 100% надеюсь, что это поможет.

например: 

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

Я добавил тот же цвет фона таблицы для app-tableзаголовок, чтобы он выглядел лучше.

...