Angular Material 输入 - 在 Flexbox 中增长的文本区域

Question

我想让

textarea

根据可用空间灵活增长。

所以基本上如果我有

<form>
  <mat-form-field class="example-full-width area-1">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>

  <mat-form-field class="example-full-width area-2" >
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

我希望输入区域也会增长。我知道存在指令

cdkTextareaAutosize

但这会让

textarea

根据输入而增长。这是我不想拥有的。

我想让

textarea

延伸到整个

height

而不仅仅是一小部分。我想要某种动态方法 - 取决于我放置组件的位置。

堆栈闪电战

Answer 1

下面的 CSS 可能有效，我们只需调整，使其始终 100% 基于 Flexbox 样式和

height:100%

，我们使用

display: flex

和

flex-grow: 1

使框适合可用空间：

::ng-deep {
  .full-textarea {
    display: flex;
    mat-form-field {
      display: flex;
      flex-grow: 1;
      .mat-mdc-form-field-flex,
      .mat-mdc-form-field-infix,
      textarea {
        height: 100% !important;
      }
    }
  }
}

html

<form class="full-textarea">
  <mat-form-field class="example-full-width area-1">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>

  <mat-form-field class="example-full-width area-2">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

Stackblitz 演示