Установка углового материала для текстовой области до 50% компонента - PullRequest
Новая
       8

Установка углового материала для текстовой области до 50% компонента

0 голосов
/ 04 декабря 2018

Я создаю приложение в angular 6 (я планирую перенести его в ng7), и в один из компонентов нужно добавить 2 элемента, текстовое поле ng материала и мой пользовательский компонент.Каждый должен занимать 50% доступной высоты.У меня проблема с textarea, так как сгенерированная mat-form-field-wrapper занимает только столько места, сколько нужно, и я не могу достичь своей цели в этом элементе (я не хочу использовать какие-либо решения :: ng-deep, так какэто не рекомендуется)

Вот что я уже сделал (пример конечно): 

<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
  <mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
    <textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
  </mat-form-field>
</form>

<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

1 Ответ

0 голосов
/ 05 декабря 2018

Вам потребуется переопределить стиль в вашей глобальной таблице стилей в качестве альтернативы использованию deep.Я не уверен, что вы можете сделать эту работу идеально при любых условиях из-за того, как элементы поля формы расположены, переменные отступы и т. Д., Но вот отправная точка: 

<form [formGroup]="myGroup" style="display: flex; flex-direction: column; height: 50%;">
  <mat-form-field class="stretch-height">
    <textarea matInput formControlName="myControl"></textarea>
  </mat-form-field>
</form>

<my-custom-component style="height: 50%" *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

Глобальный CSS: 

.mat-form-field.stretch-height,
.mat-form-field.stretch-height .mat-form-field-flex,
.mat-form-field.stretch-height textarea {
  height: 100%;
}
.mat-form-field.stretch-height .mat-form-field-wrapper {
  height: calc(100% - 1.34375em);
}
.mat-form-field.stretch-height .mat-form-field-infix {
  height: calc(100% - 1.34375em - 2px);
}

Жизненно важно, чтобы родительский контейнер имел высоту 100% или как вам угодно.

Вот демонстрация StackBlitz .

...