Верхний и нижний колонтитулы Angular Flex Layout внутри дочернего компонента - PullRequest
Новая
       9

Верхний и нижний колонтитулы Angular Flex Layout внутри дочернего компонента

0 голосов
/ 21 января 2019

Что у меня есть:

app.component.html: 

<router-outlet></router-outlet>

backend.component.html: 

<!-- Top Toolbar -->
<mat-toolbar color="primary" fxLayout="row" ...>
</mat-toolbar>

<!-- Page Content-->
<router-outlet></router-outlet>

dashboard.component.html: 

<mat-card class="filter-table-card">
    <mat-card-subtitle class="filter-table-header" ...>
    <mat-card-content class="filter-table-body" ...>
    <mat-card-subtitle fxLayout="row" class="filter-table-footer" ...>
</mat-card>

Я хочу, чтобы моя страница всегда оставалась высотой страницы, а не переполнялась.Единственная полоса прокрутки, которую я хочу, находится внутри mat-card-content, где находится таблица со строками.Поэтому я хочу, чтобы панель инструментов и два субтитра mat-card были «фиксированными», но содержимое мат-карты имело переполнение: auto.

Я уже делал это раньше в другом проекте, но по какой-то причинеЯ что-то упускаю в этом.

SCSS, который я использую в компоненте приборной панели: 

.filter-table-card {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  .filter-table-header, .filter-table-footer {
    flex-shrink: 0 !important;
  }
  .filter-table-body {
    flex-grow: 1 !important;
    overflow: auto !important;
    min-height: 2em !important;
    min-width: 2em !important;
  }
}

Хотелось бы сделать это полностью с угловой угловой разметкой вместо этого scss.

...