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.

Answer 4

I wasn't using images so the accepted answer didn't work for me. Also, it only happened when using inline: true and appeared to off by the height of the X button in the bottom right. To fix it, I added a new property called inlineHeightAdjustment and then used it within the getHeight function.

In jquery.colorbox.js:

function getHeight() {
   settings.h = settings.h || $loaded.height();
   settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
   // Adjust height for inline boxes
   settings.h = settings.inline ? settings.h + settings.inlineHeightAdjustment : settings.h;
   return settings.h;
}

Then on my pages:

$(".inlineColorBox").colorbox({
   inline: true,
   inlineHeightAdjustment: 25,
});

You could probably make it better by accepting a string so you could specify em, px, %, etc. but I knew I wanted pixels thus the numerical value assumption.