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
?
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
?
Depending on what you've meant by:
However, it is always the same size.
There are two options.
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>
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 thecdkAutosizeMinRows
andcdkAutosizeMaxRows
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.
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>
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
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.
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.