it-swarm.com.ru

Изменить размер текстовой области

В настоящее время у меня есть textarea, как это:

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

Тем не менее, это всегда один и тот же размер.

Любая идея о том, как изменить размер textarea?

8
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

14
Debmallya Bhattacharya

В настоящее время только rows влияет на высоту textarea для материала, cols не меняет его ширину.

Поэтому для увеличения ширины мы должны использовать свойство CSS width в mat-form-field, содержащем нашу textarea:

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>
8
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

3
Mohammad Dayyan

Смотрите пример . Важно добавить CSS в форму, чтобы указать ширину: 

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

а также CSS для текстовой области: 

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

Если вы не добавите CSS в форму, значок расширения отобразится в неправильном положении. 

1
Sam

Вы можете попытаться настроить высоту вашего texarea, применяя matTextareaAutosize и назначая значения для свойств matAutosizeMinRows и matAutosizeMaxRows.

Смотрите https://material.angular.io/components/input/api для получения дополнительной информации.

0
grumbler_chester