web-dev-qa-db-fra.com

Changer la taille de textarea

J'ai actuellement une textarea comme ceci:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

Cependant, c'est toujours la même taille.

Une idée sur la façon de changer la taille de la variable textarea?

cssangulartypescriptangular-material2
8
Nello

Voici un exemple:

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

Référence: https://material.angular.io/components/input/api

14
Debmallya Bhattacharya

Actuellement, seule la variable rows affecte la hauteur de matériau textarea, cols ne modifie pas sa largeur.

Par conséquent, pour augmenter la largeur, nous devons utiliser la propriété CSS width sur un mat-form-field contenant notre textarea:

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>
8
Alexander Abakumov

Matériaux angulaires 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>

Faites attention à cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows

3
Mohammad Dayyan

Voir exemple . Il est important d’ajouter css au formulaire pour spécifier la largeur: 

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

et aussi css à la textarea: 

.example-full-width {
  width: 100%;
}

Si vous n’ajoutez pas le fichier CSS au formulaire, l’icône Développer s’affiche dans une position incorrecte. 

1
Sam

Vous pouvez essayer d’ajuster la hauteur de votre texte en appliquant matTextareaAutosize et en attribuant des valeurs aux propriétés matAutosizeMinRows et matAutosizeMaxRows.

Voir https://material.angular.io/components/input/api pour plus de détails.

0
grumbler_chester