In Chrome, page won't resize after Ajax load

Question

I\'ve been feverishly CSSing my way through the final leg of a site I\'m building and I\'m running into an odd quirk with Chrome only. FF and IE seem to work fine.

I a

Answer 1

I think I've found a solution to this. (At least I haven't seen it happen in a few minutes). In the .ajax callback, after setting the content with $('div').html(data);, I resize the entire window with $(window).resize();

Answer 2

Exactly same problem I encountered, and the answer I came about is no.

I only managed to fix this by checking the height of the new div with the new content after AJAX load, and setting the correct height with with jQuery.

It would be really good if someone could find a way to force an auto resizing, but meanwhile this solution worked perfectly regardless of the amount of content.

Answer 3

It should be a pure CSS problem, I haven't used jQuery for AJAX myself but when the content is called you use this?

document.getElementById('myDiv').innerHTML=myResult

or are you using jQuery

$('#myDiv').html(myResult);

$('#myDiv').append(myResult);

if you use jQuery you should clean up the div first, like this:

$('#myDiv').html('');
$('#myDiv').html(myResult);

And if that doesn't helps you could use a fixed height and use an overflow css property

     #myDiv {
       height:600px
       overflow:auto;
     }

Of course a fixed height is not always the best solution but it might help you.

Answer 4

asyncBoolean

Default: true

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active."

• http://api.jquery.com/jQuery.ajax/

Answer 5

You can use css to solve:

#myDiv{max-height:value; overflow:auto;}

Answer 6

I was able to fix it actually with just the css. the problem was that I had absolute positioned my page wrapper element so it was effectively sitting outside of the body element flow wise. I removed the position:absolute; top:0; left:0; and just put a border:0; and padding:0; on the body element.