Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change size of 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?

like image 598
Nello Avatar asked Nov 06 '17 23:11

Nello


People also ask

How can I change textarea size?

The size of a text area is specified by the cols and rows attributes (or with CSS). The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted). The id attribute is needed to associate the text area with a label.

How do I resize textarea in HTML?

You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.


2 Answers

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.

like image 118
Alexander Abakumov Avatar answered Sep 25 '22 15:09

Alexander Abakumov


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

like image 40
batbrain9392 Avatar answered Sep 21 '22 15:09

batbrain9392