Colorbox doesn't open at proper height when first opened

Question

So I'm using the colorbox plugin for a contact form. I am just the default colorbox properties, so it should automatically adjust to the div it contains (right?).

Well There is a small vertical scroll bar on this colorbox content when its FIRST loaded. I've seen it happen sporadically in Firefox and chrome for OSX

attempt #1

$("a.modalAutosize").each(function(){
    $(this).colorbox();

});

active code on example

$("a.modalAutosize").each(function(){
    $(this).colorbox({onOpen: function(){$.fn.colorbox.resize()}});

});

Answer 1

I've investigated the problem.

Try to see which content you load by ajax. If it has some images without "height" and "width" attributes, the scroll bars can appear.

It happens because the browser does not know about the image's size and doesn't wait until it loads to calculate the page layout. After the first load the image is in the cache and the browser can calculate the size.

Try to specify the size for you images. For me it works.

Answer 2

$("a.modalAutosize").each(function(){
   $(this).colorbox();  
});

You don't have to write an each() function here. You can turn scrolling off.

Eg.

$("a.modalAutosize").colorbox({scrolling: false});

Answer 3

I experienced this issue as well except it was occurring without any images within the content. I was able to solve it by setting the width and height both to 100% on a div wrapping the content I was rendering within the colorbox.