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

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.