Fancybox Height Resize Dynamic Content

Question

I'm using Fancybox 1.3.4 to splash up and very unexciting table as follows:

                function EditExtra() { 

                $("a.EditExtra").fancybox({
                    'zoomSpeedIn': 300, 
                    'zoomSpeedOut': 300, 
                    'overlayShow': true,
                    'autoDimensions': false,
                    'titleShow': false,
                    'height': 'auto',                       
                    'scrolling' : 'no',
                    'autoScale' : false,
                    'centerOnScroll' : true,
                    'showCloseButton': true             
                });

                return false;

            }

This works fine, but when I dynamically add / remove a line from the table using a bit of jQuery, such as:

    function RemoveLine(){

        $('img.removeline').live('click',function(){

        $(this).closest("tr").remove();

        $.fancybox.resize();

        return false;

    }); 

}

...the fancybox isn't resizing to the new height of the content. The same happens when appending a new row to the bottom of the table. The actual table row insert / remove part works fine. I believe the $.fancybox.resize() function should resize the height to the new content but for some reason it's not working. I've spend ages messing around with the different parameters! urgh!.

All that heppens is if adding a row it overflows below the edge of the fancybox, or if removing just stays the same height with loads of white space at the bottom. I also noticed that if I call the fancybox with a table of varying number of rows it auto scales the height correctly to fit the content.

Any help appreciated.

Dan

Answer 1

As Marco said, the answer was to set AutoDimension: true? Or do a $.fancybox.showActivity