web-dev-qa-db-ja.com

テキストエリアのサイズを変更する

現在、次のようなtextareaがあります。

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

ただし、常に同じサイズです。

textareaのサイズを変更する方法についてのアイデアはありますか？

cssangularangular-material2
20
Nello

以下に例を示します。

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

リファレンス： https://material.angular.io/components/input/api

27
Debmallya Bhattacharya

あなたが意味するものに応じて：

ただし、常に同じサイズです。

2つのオプションがあります。

オプション1（静的変数のサイズはrows\colsに依存）：

現在、rowsのみがマテリアルtextareaの高さに影響し、colsは幅を変更しません。

したがって、幅を増やすには、widthを含むmat-form-fieldでCSS textareaプロパティを使用する必要があります。

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

オプション2（textareaコンテンツに合わせた動的なサイズ）：

マテリアル6では、CdkTextareaAutosizeディレクティブが追加されました。

公式ドキュメント から：

CdkTextareaAutosizeディレクティブを任意の<textarea>に適用して、コンテンツに合わせて自動的にサイズ変更することができます。拡張する行の最小数と最大数は、それぞれcdkAutosizeMinRowsおよびcdkAutosizeMaxRowsプロパティを介して設定できます。

そして、そこから簡単な例を示します：

<mat-form-field>
    <mat-label>Autosize textarea</mat-label>
    <textarea
        matInput
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
    </textarea>
</mat-form-field>

注：
matTextareaAutosizeは他の回答で言及されていますが、非推奨であり、次のメジャーリリースで削除されます。 公式ドキュメント は、代わりにcdkTextareaAutosizeをすでに使用しています。

22
Alexander Abakumov

角材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>

cdkTextareaAutosize、cdkAutosizeMinRows、cdkAutosizeMaxRowsに注意してください

7
Mohammad Dayyan

例 を参照してください。フォームにcssを追加して幅を指定することが重要です。

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

また、テキストエリアへのCSS：

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

Cssをフォームに追加しないと、展開アイコンが間違った位置に表示されます。

2
trees_are_great

matTextareaAutosizeを適用し、プロパティmatAutosizeMinRowsおよびmatAutosizeMaxRowsに値を割り当てることにより、texareaの高さを調整することができます。

詳細については、 https://material.angular.io/components/input/api を参照してください。

0
grumbler_chester

角度7.3.7：

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