Ввод Angular Material — текстовая область с ростом во flexbox

Я хочу, чтобы textarea гибкость росла в зависимости от доступного пространства.

В общем, если у меня есть

<form>
  <mat-form-field class = "example-full-width area-1">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder = "Ex. It makes me feel..."></textarea>
  </mat-form-field>

  <mat-form-field class = "example-full-width area-2" >
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder = "Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

Я ожидаю, что область ввода также вырастет. Я знаю, что существует директива cdkTextareaAutosize, но это позволит textarea расти в зависимости от ввода. Чего я не хочу иметь.

Мне бы хотелось, чтобы textarea растягивалось на всё height, а не только на небольшую часть. Я хочу иметь какой-то динамический подход - в зависимости от того, где я размещаю компонент.

Stackblitz

css angular angular-material

17.04.2024 17:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

121

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Приведенный ниже CSS может работать, мы можем просто настроить его так, чтобы он всегда на 100% основывался на стилях flexbox и height:100%, мы используем display: flex и flex-grow: 1, чтобы поля соответствовали доступному пространству:

::ng-deep {
  .full-textarea {
    display: flex;
    mat-form-field {
      display: flex;
      flex-grow: 1;
      .mat-mdc-form-field-flex,
      .mat-mdc-form-field-infix,
      textarea {
        height: 100% !important;
      }
    }
  }
}

HTML

<form class = "full-textarea">
  <mat-form-field class = "example-full-width area-1">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder = "Ex. It makes me feel..."></textarea>
  </mat-form-field>

  <mat-form-field class = "example-full-width area-2">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder = "Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

Демо-версия Stackblitz

Спасибо за образец. Я тоже думал о таком решении. Основная проблема, с которой я сталкиваюсь при таком подходе, заключается в том, что мне нужно полагаться на внутренние классы материалов. И они могут измениться, как мы видели в случае с Material2 и могут быть впереди с Material3.... Честно говоря, не знаю, требуется ли вообще Material, и достаточно ли обычного текстового поля. В любом случае - спасибо

— 17.04.2024 18:01

Я создал проблему на GitHub github.com/angular/comComponents/issues/28912

— 19.04.2024 10:07

17.04.2024 17:56