CODEWITHSUNDEEP
javascriptjquerycss
Panama Jack
Panama Jack

Reputation: 24448

jQuery dynamic resize div after ajax call

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

Upvotes: 20

Views: 53790

Answers (4)

Thomaszter
Thomaszter

Reputation: 1474

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.

Upvotes: 23

Maksim Vi.
Maksim Vi.

Reputation: 9225

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 =)

JS

var testData = "Test data, Test data, Test data, Test data, Test data, Test data, Test data, Test data, Test data";


$("#btn").click(function(){
  $("#sub").html(testData);
  $("#sub").css({height: 'auto'});
});**strong text**

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  #main{
    border: 1px solid #f00;
    padding: 5px;
    width: 100px;
  }
  #sub{
    border: 1px solid #000;
    padding: 5px;
    height: 72px;
  }
</style>
</head>
<body>
  <div id="main">
    <div id="sub">
    </div>
  </div>
  <input type="button" id="btn" value="ajax event"/>
</body>
</html>

Upvotes: 1

Surekha
Surekha

Reputation: 610

This solution is similar to one of the answers above(sv_in)

I have a div with id abc and has a css as follows:

#abc{
height:575px;
}

and I changed it to the following, and it worked!

#abc {
min-height: 575px;
height: auto;
}

Upvotes: 1

sv_in
sv_in

Reputation: 14039

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/

Upvotes: 13

Related Questions