angular material textarea rows css not working

Question

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

Expected Output

Solution

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.

Comments

[harkesh kumar]

If i try this also . --- <textarea matInput rows="5" cols="40" placeholder="text"></textarea>

[Pramesh Bajracharya]

The StackBlitz is not accessible anymore. Is it possible to update it someways please?