CODEWITHSUNDEEP
javascriptjquerycsstextarea
1252748
1252748

Reputation: 15372

make textarea height expand to container div's height (on resize)

Is there a way to make these two textareas that are floated next to one another always be the same height. The height of their container, which expands when one of them is resized. I've tried putting them in a container div and setting their height to 100%. I've tried making a jquery function to resize them (you can see it commented out in the fiddle) which failed.

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

How can I make them always the same height after a resize?

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;
}

Upvotes: 0

Views: 2210

Answers (3)

Roman
Roman

Reputation: 21765

You can use javascript to implement the following scenario. Once the parent element changes its dimentions, for instance, height, you call the functios (ES6 Javascript version):

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

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

}

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

Upvotes: 0

N20084753
N20084753

Reputation: 2170

try setting textarea's height to 100% and container's height to 150px. when textarea is in 100% it will automatically fits into your parent div's height, hope this helps.

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

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

Upvotes: 0

Tony Dinh
Tony Dinh

Reputation: 6726

This will works:

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

You could use mousemove instead of mouseup for "real time" effect.

Upvotes: 2

Related Questions