сделать так, чтобы высота текстовой области увеличивалась до высоты контейнера (при изменении размера)

Question

сделать так, чтобы высота текстовой области увеличивалась до высоты контейнера (при изменении размера)

0

Есть ли способ сделать эти два текстовых поля, которые плавают рядом друг с другом, всегда будет одинаковой высоты. Высота их контейнера, который расширяется, когда один из них изменяется. Я попытался поместить их в контейнер div и установил их высоту до 100%. Я попытался сделать функцию jquery, чтобы изменить ее размер (вы можете видеть, как она закомментирована в скрипке), которая не удалась.

http://jsbin.com/IkESUli/6/edit

Как я могу сделать их всегда одинаковой высоты после изменения размера?

textarea{
  min-height:150px;
  float:left;
  display:inline-block;
  overflow:auto;
}
#t2{
  width:30px;
  overflow:hidden;
  text-align: right;
  white-space:nowrap;
}

div.container{
  min-height:150px;
  border:1px solid black;
  display:inline-block;
}

1252748 26 окт. 2013, в 14:21

Источник

Теги:

javascript

jquery

css

textarea

3 ответа

0

Вы можете использовать javascript для реализации следующего сценария. Как только родительский элемент изменит свои параметры, например высоту, вы вызываете functios (версия J6 для ES6):

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

Roman 05 дек. 2018, в 23:49

0

попробуйте установить высоту textarea на 100% и высоту контейнера до 150 пикселей. когда textarea находится на 100%, он автоматически вписывается в ваш родительский div, надеюсь, это поможет.

textarea {      
    height: 100%;
    width: 100%;
    display: block;
}

div.container {height: 150px; min-height:150px; мин-высота: 150px; border:1px solid black; граница: 1px сплошной черный; display:inline-block; Дисплей: встроенный блок; } }

N20084753 26 окт. 2013, в 11:35

Ещё вопросы

TrungDQ · Accepted Answer · 2013-10-26T10-24-00.000Z

Это будет работать:

$(".t").mouseup(function(){
    $(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});

Вы можете использовать mousemove вместо mouseup для эффекта "реального времени".