CODEWITHSUNDEEP
htmlcssangularangular-material
harkesh kumar
harkesh kumar

Reputation: 883

angular material textarea rows css not working

I am Using angular Material design and i used Textarea but the height is not change is fixed i tried so many ways but not working i like want

However, it is always the same size. Even Change css Also but its just changing height and i can say its not working

Any idea on how to change the size of the textarea?

<mat-form-field appearance="outline" class="example-full-width">
      <mat-label>Discription</mat-label>
      <textarea matInput></textarea>
    </mat-form-field>

Even I Tried This But same issue am getting

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

This Output i am getting form code

Demo

Expected Output

enter image description here

Upvotes: 2

Views: 13441

Answers (2)

Maihan Nijat
Maihan Nijat

Reputation: 9355

You need to add:

matAutosizeMinRows=5 matAutosizeMaxRows=20

This will set a minimum number of rows and the maximum number of rows which control the height also.

If you tried the above, as you edited the question, and you are getting a different results. Then probably another CSS overrides the textarea height. Check with your developer tool to find out other CSS attached to the textarea.

Upvotes: 2

AminRostami
AminRostami

Reputation: 2772

set line-height style for textarea.

e.g: 

<mat-form-field >
    <textarea matInput placeholder="Description" style="line-height: 20px !important"></textarea>
</mat-form-field>

Upvotes: 0

Related Questions