1

I have a parent div with id contentPlaceHolder. It has a width of 640px. I then have content loading into this div with ajax as follows:

function loadContent(page){
    $("#contentPlaceHolder").html('<br><br><div style="width:664px; text-align:center; font-size:12px; color:#666;"><img src="/images/loader.gif" border="0"><br>loading</div>');
    $("#contentPlaceHolder").load("/ajax/content?page=" + page);
}

<div onclick="loadContent('profile')">Profile</div>

<div id="contentPlaceHolder" style="width:640px; height:auto; text-align:left;"></div>

problem is, my parent div contentPlaceHolder does not automatically grow with the ajax content. I tried make the div height:auto and that did not help. Only way it seems to work is if I fix a height but problem with that is I cannot fix a height as the content length varies.

Any advice as to how I can achieve this?

Thanks

John
  • 6,417
  • 9
  • 27
  • 32
  • 1
    Can you add you html code with css properties...? – Airan Mar 25 '14 at 17:11
  • @BwithLove i've added the divs code that i'm using. It's a simple div with height and width. Content loads into the div but gets cut off – John Mar 25 '14 at 17:18
  • Resize the div in the AJAX callback function. If you read the [documentation](https://api.jquery.com/load/) you'll find some simple examples. – jahroy Mar 25 '14 at 17:25
  • @jahroy how would I do that? i dont know what height to resize it to? – John Mar 25 '14 at 17:26
  • Check out [this](http://stackoverflow.com/questions/6853293/jquery-how-do-i-get-the-height-of-a-divs-full-content)... Don't be afraid to search the web. – jahroy Mar 25 '14 at 17:30
  • Can you put your complete page html after loading ajax contents. You can put it in jsfiddle and share the link here. – Airan Mar 25 '14 at 17:57

1 Answers1

1

Content loaded with .load() should automatically adjust the height of the container unless the height is specifically set on the content that was loaded, the container, or one of its parent elements.

Use your browser's built in developer tools (chrome, firefox) to inspect the container element, its contents after the ajax load, and it's parent elements. I would bet that somewhere you will find a height property set to a specific value and possibly even an overflow property set to hidden.

Here is a fiddle that demonstrates the height auto adjusting even with a min-height and overflow:hidden set (tested in chrome and firefox).

Jonathan Dixon
  • 2,316
  • 23
  • 29
  • There is another div which has a min-height set and overflow:hidden, but these need to be set for the tab system that I am using to work. If i set my #contentPlaceHolder height manually in the style then the content loads. So i'm trying to dynamically change the height after the load. i've tried $("#contentPlaceHolder").css({height: 'auto'}); and even tried instead of auto a fixed px e.g. 900px but it doesnt seem to change the height. – John Mar 25 '14 at 18:41
  • if i put the main div overflow:auto instead of hidden. then the .load loads all content however i am then left with a scrolling div which I do not want. I would like the div to be expanded – John Mar 25 '14 at 18:56
  • Having a `min-height` set should not prevent the height from auto adjusting. There has to be something else going on. Is this in all browsers or just one? – Jonathan Dixon Mar 25 '14 at 18:58
  • its on all browers, Chrome, Safari, firefox and IE – John Mar 25 '14 at 21:25
  • +1 for "_use the developer tools_". This is how you solve all JavaScript issues like this. – jahroy Mar 26 '14 at 02:08