Установите максимальную ширину для текстовой области в наборе полей

Я хочу ограничить растяжение текстовой области до 100% родительского набора полей.

В соответствии с этим вопросом это работает, когда родителем является div: Как я могу предотвратить растяжение текстовой области за пределы его родительского элемента DIV? (только проблема с google-chrome)

Теперь с fieldsets это не работает: http://jsfiddle.net/b4oLy135/7/

HTML

<fieldset id="container">
    <textarea></textarea>
</fieldset>

CSS

textarea {
    max-width: 50%;
}
#container {
    max-width: 80%;
    border: 1px solid red;
}

Что мне здесь не хватает?


css fieldset textarea
person Dollique    schedule 09.01.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать следующее.

#container {
  position: relative;
  max-width: 80%;
  overflow: none;
  border: 1px solid red;
  height: 100px;
  margin: 0;
  padding: 5px;
}

textarea {
  position: absolute;
  display: block;
  width: 40%;
  max-width: calc(100% - 15px);
  height: 40%;
  max-height: calc(100% - 15px);
 }
<fieldset id="container">
    <textarea></textarea>
</fieldset>

Таким образом, размер textarea можно изменить только до ширины и высоты его родителя fieldset.

person thisdotutkarsh    schedule 11.01.2021

arrow_upward
0
arrow_downward

Если в вашем наборе полей более одного <input>, абсолютное позиционирование не работает.

Мое решение состояло в том, чтобы просто использовать оболочку для каждого поля <textarea>, поэтому я мог использовать решение, о котором я упоминал в вопросе.

Важно: Не работает при использовании % в родительском элементе. Возникает ошибка при использовании % и растяжении родительского элемента более чем на 200%.

Вот моя текущая скрипка: https://jsfiddle.net/d23hgb8w/3/

HTML

<fieldset>
    <div class="textarea__wrapper">
      <textarea></textarea>
    </div>
    
    <input>
</fieldset>

CSS

.textarea__wrapper {
  border: 1px solid red;
  width: 500px;
}

textarea {
  max-width: 100%;
 }
person Dollique    schedule 11.01.2021