Colorbox doesn't open at proper height when first opened

Derek Adair picture Derek Adair · Jul 11, 2010 · Viewed 8.7k times · Source

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

maectpo picture maectpo · Jan 26, 2011

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.