MatInput textarea fill height of div

【问题标题】：MatInput textarea fill height of divMatInput textarea fill height of div
【发布时间】：2022-12-01 20:13:01
【问题描述】：

I would like to fill the entire div with my matInput textarea

html:

<div class="grid">
    <mat-form-field>
            <mat-label>comment</mat-label>
            <textarea matInput></textarea>
    </mat-form-field>
</div>

but the css is not working for the textarea

.grid {
  height: 500px;
  background-color: yellow;

  textarea {
    height: 100%;
  }
}

I would like to dynamically set height and width of the textarea to 100% like this:

【问题讨论】：

标签： css angular angular-material mat-form-field mat-input

【解决方案1】：

The textarea depends on rows and columns. docs

You could use the native attributes like rows or from Angular Material CDK like cdkTextareaAutosize. docs

Example:

<div class="grid">
  <mat-form-field>
    <mat-label>comment</mat-label>
    <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="30"></textarea>
  </mat-form-field>
</div>

.grid {
  height: 500px;
  background-color: yellow;

  mat-form-field {
    width: 100%;
    height: 100%;
  }
}

You could also remove the cdkTextareaAutosize to keep resize handle and play with the rows amount.

For more info you could also search the web for keywords like:
angular material textarea height (and without angular material)

【讨论】：