Change size of textarea - css

Question

I currently have a textarea like this:
<textarea matInput rows="5" cols="40" placeholder="text"></textarea>
However, it is always the same size.
Any idea on how to change the size of the textarea?

Answer 1

Depending on what you've meant by:
However, it is always the same size.
There are two options.
OPTION 1 (STATIC size depending on rows \ cols):
Currently, only rows affects the Material textarea height, cols doesn't change its width.
Therefore for increasing width, we have to use the CSS width property on a mat-form-field containing our textarea:
<mat-form-field style="width: 300px;">
<textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>
OPTION 2 (DYNAMIC size to fit textarea content):
In Material 6, CdkTextareaAutosize directive was added.
From an official docs:
The cdkTextareaAutosize directive can be applied to any <textarea> to
make it automatically resize to fit its content. The minimum and
maximum number of rows to expand to can be set via the
cdkAutosizeMinRows and cdkAutosizeMaxRows properties respectively.
And here's a simplified example from there:
<mat-form-field>
<mat-label>Autosize textarea</mat-label>
<textarea
matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5">
</textarea>
</mat-form-field>
NOTE:
matTextareaAutosize mentioned in other answers is deprecated and will be removed in the next major release. The official docs already use cdkTextareaAutosize instead.

Answer 2

Here's an example :
<mat-form-field>
<mat-label>Description</mat-label>
<textarea matInput formControlName="description" matTextareaAutosize matAutosizeMinRows=1 matAutosizeMaxRows=5></textarea>
</mat-form-field>
Reference: https://material.angular.io/components/input/api

Answer 3

Angular materials 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>
Pay attention to cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows

Answer 4

See example. It is important to add css to the form to specify the width:
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
and also css to the textarea:
.example-full-width {
width: 100%;
}
If you do not add the css to the form, then the expand icon displays in the incorrect position.

Answer 5

You can try to adjust the hight of your texarea by applying matTextareaAutosize and assigning values for properties matAutosizeMinRows and matAutosizeMaxRows.
See https://material.angular.io/components/input/api for additional details.