it-swarm.com.ru

Angular Материал выдвижного ящика в полный рост, автоматическое переполнение содержимого

Вчера я столкнулся с проблемой CSS, которая, похоже, связана с mat-drawer и Angulars router-outlet. У меня есть полная страница flexbox с двумя детьми. mat-toolbar вверху и пользовательский компонент app-sidenav внизу. Это отлично работает, и app-sidenav заполняет остальную часть страницы, поскольку flexbox растягивается. Посмотрите на эту упрощенную настройку, прежде чем продолжить:

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

Связанный css

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

В компоненте app-sidenav у меня теперь есть следующий шаблон

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

И связанные стили

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

Это работает нормально, и высота подходит, если нет содержимого, превышающего высоту app-sidenav. Полоса прокрутки отображается во внешнем компоненте flexbox, а не в теге main-. Я также тестировал !important на высотах, а также 100vh, но безуспешно. Так как я могу получить работающий overflow-y в основном теге?

Я почти уверен, что есть простой трюк, но я не могу понять это. Спасибо за вашу помощь. Ура!


Правка:

Я сделал stackblitz для этой проблемы. Когда вы переходите к компоненту ciao , вы видите, что полоса прокрутки появляется в корне документа, а не в основном теге.

2
ngfelixl

В дополнение к рабочему решению @ Sakkeer я нашел другой способ, не взламывая атрибут position, но с использованием flex. Просто добавьте (не заменяйте) следующие правила CSS к существующим стилям.

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
3
ngfelixl

Попробуйте это для основного класса CSS

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}
2
A.Sakkeer
     <mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
        <mat-drawer #drawer mode="side" class="toolbar">
            <app-sidenav></app-sidenav>
        </mat-drawer>
        <router-outlet></router-outlet>
     </mat-drawer-container>

Вышеприведенный код работал только для меня, когда я помещал стиль напрямую и использовал autosize, чтобы mat-box-container не перекрывался на странице маршрутизатора.

0
Vijender Reddy Chintalapudi