jQuery dynamic resize div after ajax call

Question

I'm trying to expand a div to fit text without having to specify an exact hegiht. I tried using something like.

$('#div').addClass('myclass');

With myclass having a height:auto; but that won't work. I don't know how to get it to expand the div accordingly from an ajax call that returns text.

This is the main css class

.pro_input{ 
border-top:2px solid #919191;
border-left:1px solid #CBCBCB;
border-right:1px solid #CBCBCB;
border-bottom:1px solid #CBCBCB;
width:530px;
background-color:#F2F2F2;
height:72px;    
     }
 .pro_attach{
     height:auto;
  }

I'm just trying to make the height auto after an ajax reponse. The text can be a little or a lot. So I need it to expand accordingly. I'm used the addclass to change it for other things but using it with jQuery addclass with pro_attach doesn't work.

Thanks

Answer 1

UPD: I created a basic example, I am pretty sure I got it all wrong at this stage, so if you could modify it and post a link here, I would be able to be more helpful =)

Answer 2

Assumption: That initially, there was no content in the div. Later on, the text is added into the div.

Let's say that the id of the div is 'abc' and the height of the div when there is no content in it is 10px. then the style that I would like to give is:

#abc {
  min-height:10px;
  height:auto !important;
  height:10px;
}

Source: http://www.dustindiaz.com/min-height-fast-hack/

Answer 3

Just have to do this:
Wrap a limit div around the div you want to load text with ajax:

<div id="limit">
    <div id="div"> ajaxed load text </div>
</div>

Give the #limit div a overflow hidden:

#limit { position: relative; overflow: hidden; }

And finally, fit the #limit height to the height of the #div, at all times AFTER you load text with ajax:

$("#limit").css({
    height:$("#div").height()
});

This is the same, just animated:

$("#limit").animate({
    height:$("#div").height()
},600);

The script checks the height of the #div and give it to #limit, that's the trick.