Body Growth Regarding Fancybox

Question

I use Fancybox to display complex forms on an intranet site. The Fancybox forms page starts from using Datatables to filter the filter and sort numerous records from the database. When a list is filtered significantly and Fancybox loads, the contents of Fancybox may exceed the body of the page. This results in a white area where the Fancybox overlay is not displayed.

Besides ugliness, you cannot click in this area to close the Fancybox.

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

Thanks!

EDIT: The Gov solution below is correct, but does not solve the problem. In fact, you need to increase the height of the Fancybox overlay. I take this now as a mistake with Fancybox. It seems that if the body grows due to the size of the Fancybox, then the overlay should automatically increase to the size of the body. I will send this to the developers. In the meantime, if anyone has this problem, the Gov code, as I 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 it cannot be used to not use anyone against it!

Answer 1

Calculate the height of a fancy window, suppose 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 fancybox is displayed, then it sets the height as needed.

Answer 2

I just found that changing CSS works.

 #fancybox-overlay { position: fixed; //I just changed the position to fixed, and voila top: 0; left: 0; width: 100%; z-index: 1100; display: none;