Colorbox plugin not resizing after jQuery UI tabs load

(First, let me say that I read every similar post with the resize callback. I've also tried the Colorbox API and can't find anything.)

I'm using the Colorbox plugin. Inside of the plugin, there are jQuery UI tabs. The tabs work (i.e., are switching and displaying as expected) inside of the colorbox, except that Colorbox is getting the height of the tabs at the onComplete callback, which is before the tabs are called and are still just a series of stacked divs. I know this because I set an alert with the height of the tabs on the onComplete callback, and it's tall enough that after the tabs load, they have a ton of whitespace below them.

I'm trying to resize the Colorbox, and am using the $.colorbox.resize() method, but it's not working as expected. I would expect that if it resized, it would account for the div that holds the tabs having a smaller height and adjusting accordingly, but nothing changes.

I'm hesitant to paste the HTML because it's around 600 lines.

Here's the JS: (note: I'm using a few plugins, all of which work as expected, so I don't think there's a conflict)

    $(document).ready(function(){   
    var lightboxHeight = $(window).height() + 10; // Get height of window on load for declaring as height property of lightbox
    $('.edit-profile-text').colorbox({
        onComplete:function(){  
                $('#cboxLoadedContent').jScrollPane();  // Custom scrollbar plugin
                $('html').css('overflow-y', 'hidden');  // Hide scrollbar on load so background doesn't scroll
                $('#my-profile-tabs').tabs({            // jQuery UI Tabs
                    load: func开发者_开发百科tion(){
                        $('.tabs').height('100px'); }
                }); 
                $('.editable').editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { // In place Editing
                    submit: 'Save',
                    cancel: 'Cancel'
                }); 
                $('.editable-textarea').editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { // In place Editing
                    submit: 'Save',
                    cancel: 'Cancel',
                    type: 'textarea'
                });
                $('.datepicker').datepicker(); // jQuery UI datepicker
                $.fn.colorbox.resize(innerHeight);      
        },
        onClosed:function(){ 
                $('html').css('overflow-y', 'scroll'); // Bring scrollbar back on close
        },
        close: 'X',
        height: lightboxHeight,
        fixed: true // So that colorbox opens at the point on the document the user has scrolled to
    });
});

Note the $.fn.colorbox.resize(innerHeight); method. No luck.

I've also tried really hackish things like changing the height of the div as the last function on the onComplete callback, but nothing changed.

Here's the abbreviated HTML:

    <section class="tabs clearfix">

        <div id="my-profile-tabs" class="clearfix">

            <ul>
                <li><a href="#tabs-1">Personal</a></li>
                <li><a href="#tabs-2">My Info</a></li>
                <li><a href="#tabs-3">Match Me</a></li>
                <li><a href="#tabs-4">Settings</a></li>
            </ul>

            <div id="tabs-1">

                ...

            </div><!-- end #tabs-1 -->

            <div id="tabs-2">

                ...

            </div><!-- end #tabs-2 -->

            <div id="tabs-3">

                ...

            </div><!-- end #tabs-3 -->

            <div id="tabs-4">

                ...

            </div><!-- end #tabs-4 -->

        </div><!-- end #my-profile-tabs -->

</section><!-- end .tabs -->

So the goal is that the height of the Colorbox window is appropriate, and that it doesn't add like 1700px whitespace below the tabs (i.e., the height of the tabs div before they become tabs).

I've wasted so much time on this and am pretty frustrated. Any help is greatly appreciated.

Try something like this:

 $.colorbox.resize({
     innerHeight: lightboxHeight
});