Search code examples
jqueryautogrow

autogrow textarea container not resizing according to textarea size

I have textarea and a DIV container holding that textarea.

<div class="holder">
    <div style="float:left;">
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/211204_417552211638405_1828134258_q.jpg">
    </div>
    <div style="float:left;">
        <textarea class="grow" row="5" cols="20"></textarea>
    </div>
</div>

I am using autogrow plugin.

$(document).ready(function(){
  $(".grow").autogrow();  
});

When textarea resizes according to contents the container div doesnt expand accordingly. I tried to add

Height: 100%;

But that doesnt work, I see its the float property thats causing problem, but i dont know how to make it work with float property.

Demo Here

Solution

  • This is because the elements within the div are both floated, therefore they are not part of the document flow for the browser to calculate the height of the parent. The quick workaround is to set overflow: hidden on the parent container.

    Example fiddle