Question

153

jQuery dynamic resize div after ajax call

rated 0 times [ 154] [ 1] / answers: 1 / hits: 53343 / 14 Years ago, thu, october 21, 2010, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alejandro

Add To Favorites

Follow

Total Points: 231

Total Questions: 102

Total Answers: 107

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

alejandro questions

1 Discord.js v13 code breaks when upgrading to v14

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React Image Magnifiers not working when zoom in using nextjs

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Discord.js bot responds when mentioned

Thu, Sep 10, 20, 00:00, 4 Years ago

1 how to get input field value on button click in Vuejs or in vanila javascript?

Sun, Aug 9, 20, 00:00, 4 Years ago

1 How do I set a user's voice channel when I have the user's id?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 14 Years ago kristiano · Accepted Answer

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.