Question

I Use Fancybox to display complex forms on an intranet site. The page the Fancybox forms are launched from uses Datatables to filter filter and sort numerous records from the database. When the list is filtered significantly and the Fancybox is loaded, the Fancybox content can exceed the page body. This results in white area where the Fancybox overlay does not show.

In addition to being ugly, you cannot click in this area to close the Fancybox.

What is the best way to grow my page body to at least the height of the Fancybox, either with CSS, Javascript or both?

Thanks!

EDIT:
Gov’s solution below is correct but does not solve the problem. Actually the height of the Fancybox overlay itself needs to be increased. I’m perceiving this now to be a bug with Fancybox. It seems if the body grows as a result of of the Fancybox size, then the overlay should increase to the body size automatically. I will submit this to the developers. In the meantime if anyone has this issue Gov’s code as I have modified it will work:

// Adjust Fancybox Overlay Height to Large Fancyboxes
function overlayHeight() {
  fancyBoxHeight = $('#fancybox-wrap').height(); 
  finalheight = fancyBoxHeight + 300;
  $('#fancybox-overlay').css('height', finalheight);
}

I also want to note that Fancybox is a really great plugin, so this should not be taken to sway from anyone against using it!

Answer 1

Calculate the height of the fancy box , assume fancybox id is fancyboxid1

fancyBoxHeight=$('#fancyboxid').height(); 

// determine how much width you want//

finalheight=fancyBoxHeight+300 or 400

 $('body').css('height', finalheight);

You need to execute the above code , after you display the fancybox , then it sets the height as required.