How to make Height Auto on Colorbox?

Question

I'm using a jQuery plugin called ColorBox and basically it creates a jquery modal however the modal has a fixed size height of "500" and I want it to have a minimum height but also I have expending menus within the modal so I would like to to automatically expand. How do I do this?
The code I currently have is:

$(".colorboxlink1").colorbox({
  opacity:"0.2",
  width:"450",
  height:"500",
  title:"To close this dialog click X icon at the right", 
  iframe:true
});

Iv tried deleting the Height from this and using CSS, but that didnt work. Iv tried putting what I know of jquery in this line, but nothing seems to work, however I am pretty new to jQuery. Anyone got any ideas?

Answer 1

You can use this:

$('.colorboxlink1').colorbox({ 
    onComplete : function() { 
       $(this).colorbox.resize(); 
    }    
});

And this in your code after colorbox was initialized:

$.colorbox.resize(); 

Answer 2

I had a similar situation and I used a the setTimeout function to give some time for the colorbox to load then called the resize method.

I called the colorbox

var profileHeight=jQuery('#profile').height(); //Get the height of the container     
    setTimeout(function (){
       jQuery.colorbox({
           html:jQuery('#profile').html(),
           width:'50%',
           height:profileHeight, 
           opacity:0.5})}
        , 600);
//Wait 700ms then resize
setTimeout(function(){jQuery(this).colorbox.resize();},700);

That got me the functionality I needed. The modal window always resizes to the content of the container