#angular #angular-material #angular-flex-layout
#angular #angular-материал #angular-flex-layout
Вопрос:
Я совсем новичок в этой теме и в настоящее время нахожусь в первых попытках проекта. Поэтому я надеюсь, что вы сможете мне помочь 🙂
Я использую гибкое описание с мат-картами, и первые три элемента работают так, как ожидалось. Однако последний элемент имеет не ту же высоту, что и другие, и я не могу это исправить.
Вот мой код:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard></ra-listcard>
</div>
</div>
Listcard-Component-html:
<mat-card class="mat-elevation-z5">
<mat-card-title>
<h5>Text</h5>
</mat-card-title>
<mat-card-content>
<mat-list-item *ngFor="let item of items"> {{ item }} </mat-list-item>
</mat-card-content>
</mat-card>
Без тега ra-listcard он, похоже, работает. Я также безуспешно пробовал растягивать FlexLayout. Я думаю, что ra-listcard в качестве родительского контейнера устанавливает неправильную высоту, как я могу исправить эту проблему?
В CSS задан только размер h5 и размер текста.
Ответ №1:
Я предполагаю, что в ra-listcard
стилях компонентов следует объявить следующее:
:host {
display: block;
}
mat-card {
height: 100%;
}
См. https://angular-9-material-starter-5k4ugj.stackblitz.io для упрощенной версии.
Ответ №2:
С помощью ответа Клеменса Суммирования я понял, как устанавливать свойства для родительских контейнеров, и я нашел решение своей проблемы:
:host {
display: flex;
height: 100%;
}
mat-card {
width: 100%;
}
Ответ №3:
Вы можете добавить fxFlex
свои теги так, чтобы они занимали все доступное пространство, например:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard fxFlex></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard fxFlex></ra-listcard>
</div>
</div>