改变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

取决于您的意思：

  

但是，它的大小始终相同。

有两种选择。

选项1（STATIC大小取决于rows \ cols）：

目前，只有rows影响素材textarea高度，cols不会改变其宽度。

因此，为了增加宽度，我们必须在包含width的{​​{1}}上使用CSS mat-form-field属性：

textarea

选项2（DYNAMIC大小以适合<mat-form-field style="width: 300px;"> <textarea matInput rows="5" cols="40" placeholder="text"></textarea> </mat-form-field> 内容）：

在材料6中，添加了textarea指令。

来自ConcretePage.com的帖子：

  

Angular Component Dev Kit（CDK）提供CdkTextareaAutosize指令   自动调整textarea的大小以适合其内容。它提供   cdkTextareaAutosize属性以启用自动调整功能，cdkAutosizeMinRows   用于定义最小行数和cdkAutosizeMaxRows的属性   用于定义textarea中的最大行数的属性   自动调整大小。

以下是该帖子的简化示例：

CdkTextareaAutosize

注意：
其他答案中提及的<mat-form-field> <textarea matInput placeholder="Description" cdkTextareaAutosize cdkAutosizeMinRows="2" cdkAutosizeMaxRows="5"> </textarea> </mat-form-field> 已弃用，将在下一个主要版本中删除。 official docs已使用matTextareaAutosize代替。

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

见example。将css添加到表单以指定宽度非常重要：

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

还有css到textarea：

.example-full-width {
  width: 100%;
}

如果未将css添加到表单，则展开图标将显示在错误的位置。

Answer 5

您可以尝试使用matTextareaAutosize并为属性matAutosizeMinRows和matAutosizeMaxRows分配值来调整texarea的高度。

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

Answer 6

角度7.3.7：

<textarea [matTextareaAutosize] matInput placeholder="Leave a comment"></textarea>