Ändern der Größe des textarea

Ich habe derzeit eine textarea wie diese:

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

Allerdings ist es immer die gleiche Größe.

Irgendeine Idee, wie ändern Sie die Größe des textarea?

Könnten Sie akzeptieren Sie meine Antwort oder lassen Sie mich wissen, wie ich mich verbessern könnte, bitte?

InformationsquelleAutor Nello | 2017-11-06

  1. 19

    Hier ein Beispiel :

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

    Referenz: https://material.angular.io/components/input/api

    InformationsquelleAutor Debmallya Bhattacharya

  2. 14

    Je nachdem, was hast du gemeint mit:

    Allerdings ist es immer die gleiche Größe.

    Gibt es zwei Möglichkeiten.

    OPTION 1 (STATISCHE Größe je nach rows \ cols):

    Derzeit nur rows wirkt das Material textarea Höhe cols ändert nicht seine Breite.

    Daher für die Erhöhung der Breite, haben wir die Verwendung der CSS - width - Eigenschaft auf eine mat-form-field mit unserer textarea:

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

    OPTION 2 (DYNAMISCHE Größe zu passen textarea Inhalt):

    Material 6, CdkTextareaAutosize Richtlinie Hinzugefügt wurde.

    Von einem post auf ConcretePage.com:

    Winkel-Komponente Dev Kit (CDK) bietet CdkTextareaAutosize Richtlinie
    automatisch die Größe einer textarea zu groß für seinen Inhalt. Es bietet
    cdkTextareaAutosize Eigenschaft aktivieren Sie die automatische Skalierung der Seiten, cdkAutosizeMinRows
    Eigenschaft definieren Sie minimale Höhe der Zeilen und cdkAutosizeMaxRows
    - Eigenschaft definieren Sie die maximale Höhe der Zeilen in der textarea für
    die automatische Skalierung der Seiten.

    Und hier ist ein Vereinfachtes Beispiel aus diesem post:

    <mat-form-field>
  <textarea
    matInput 
    placeholder="Description" 
    cdkTextareaAutosize
    cdkAutosizeMinRows="2"
    cdkAutosizeMaxRows="5">
  </textarea>
</mat-form-field>

    HINWEIS:

    matTextareaAutosize erwähnt in anderen Antworten ist veraltet und wird entfernt werden, in der nächsten major release. Die offiziellen docs nutzen bereits cdkTextareaAutosize statt.

    Diese Antwort funktioniert bei mir...Danke

    InformationsquelleAutor Alexander Abakumov

  3. 6

    Winkel-Materialien 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>

    Achten Sie auf cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows

    InformationsquelleAutor Mohammad Dayyan

  4. 1

    Sehen Beispiel. Es ist wichtig, fügen Sie css, um das Formular zum festlegen der Breite: 

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

    und auch css die textarea: 

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

    Wenn Sie nicht fügen Sie die css für das Formular, dann das erweitern-Symbol zeigt in die falsche position.

    InformationsquelleAutor Sam

  5. 0

    Können Sie versuchen, passen Sie die Höhe der texarea durch die Anwendung matTextareaAutosize und zuweisen von Werten für Eigenschaften matAutosizeMinRows und matAutosizeMaxRows.

    Sehen https://material.angular.io/components/input/api für weitere details.

    InformationsquelleAutor grumbler_chester

  6. 0

    Winkel 7.3.7:

    <textarea [matTextareaAutosize] matInput placeholder="Leave a comment"></textarea>

    InformationsquelleAutor Jonathan

Schreibe einen Kommentar