Угловое автоматическое изменение размера текстовой области

[![введите здесь описание изображения][1]][1] Я хотел установить максимальную высоту текстовой области, чтобы, когда пользователь продолжал добавлять текст, если он достигает максимальной высоты, он добавлял прокрутку. Но моя текущая реализация состоит в том, что он растягивает модальное окно, поэтому, если я добавлю больше текста, модальное окно станет слишком длинным.

Как сделать так, чтобы модальное окно не растягивалось? Спасибо.

html

 <div fxLayout="row" fxLayoutAlign="start start" class="full-width question-text" fxLayoutGap="12px">
          <mat-form-field style="height: auto; overflow: hidden;" class="pr-4" appearance="outline">
            <mat-label>Comments</mat-label>
            <div
            style="
              margin-right: 10px;
              overflow-y: auto;
              height: auto;
              max-height: 200px;
            "
          >
          <textarea cdkTextareaAutosize
          matTextareaAutosize
          matInput
          formControlName="comment"
          [required]="isCommentRequired()"
        ></textarea>
          </div>
Источник

3 ответа

Решение

overflow-y:scroll поместите это в textarea css, это не угловая проблема, а проблема CSS, также удалите overflow-y: auto из родительского div.

Источник

Вы пробовали matAutosizeMinRows и matAutosizeMaxRows

<textarea matInput
              matTextareaAutosize
              [matAutosizeMinRows]="min"
              [matAutosizeMaxRows]="max"></textarea>
  </mat-form-field>
Источник

Я нашел это в документации Angular Material (13.3.2)

В компоненте:

      import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {Component, NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';

@Component({
  selector: 'text-field-autosize-textarea-example',
  templateUrl: './text-field-autosize-textarea-example.html',
  styleUrls: ['./text-field-autosize-textarea-example.css'],
})
export class TextFieldAutosizeTextareaExample {
  constructor(private _ngZone: NgZone) {}

  @ViewChild('autosize') autosize: CdkTextareaAutosize;

  triggerResize() {
    // Wait for changes to be applied, then trigger textarea resize.
    this._ngZone.onStable.pipe(take(1)).subscribe(() => this.autosize.resizeToFitContent(true));
  }
}

В шаблоне:

      <mat-form-field appearance="fill">
  <mat-label>Autosize textarea</mat-label>
  <textarea matInput
            cdkTextareaAutosize
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>
Источник
Другие вопросы по тегам