改变textarea的大小

Question

我目前有textarea这样的:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

但是,它总是相同的大小.

关于如何改变尺寸的任何想法textarea？

Answer 1

这是一个例子:

<mat-form-field>
  <mat-label>Description</mat-label>
  <textarea matInput formControlName="description" matTextareaAutosize matAutosizeMinRows=1 matAutosizeMaxRows=5></textarea>
</mat-form-field>

参考:https://material.angular.io/components/input/api

Answer 2

目前,仅rows影响材料cols高度,rows不改变其宽度.

因此,为了增加宽度,我们必须使用包含我们的CSS textarea属性:colswidth

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>

Answer 3

角材料7.2：https :
//material.angular.io/components/input/examples

<mat-form-field>
  <mat-label>Autosize textarea</mat-label>
  <textarea matInput cdkTextareaAutosize
            cdkAutosizeMinRows="2"
            cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>

注重cdkTextareaAutosize，cdkAutosizeMinRows，cdkAutosizeMaxRows

Answer 4

matTextareaAutosize您可以尝试通过应用和分配属性matAutosizeMinRows和 的值来调整 texarea 的高度matAutosizeMaxRows。

有关更多详细信息，请参阅https://material.angular.io/components/input/api。