Reply To: Fancybox Loads At Top Of Page

Your Account / Forums / Easy FancyBox Pro / Fancybox Loads At Top Of Page / Reply To: Fancybox Loads At Top Of Page

August 30, 2018 at 8:52 pm #12552

Hi James, I see what you mean and what is happening. It seems like a conflict with the theme but I cannot pinpoint WHY this is happening. But what isĀ happening, is this:

A div in the theme with ID responsive-menu-pro-noscroll-wrapper has a style rule “height: 100%” which makes it as high as the viewport. Then, somehow (again, I don’t know why) the FancyBox script creates the light box frame inside this div, expanding it to the div’s height. This height is now limited to the viewport height, not the total page height.

What you could do is add this style rule to the Custom CSS field in the Customizer:


#responsive-menu-pro-noscroll-wrapper {
  height: auto;
}

This should solve the light box issue but not the underlying problem. And it might break some kind of scroll effect in the theme (not sure what that div is for) or cause other issues. For instance, the image loader/spinner icon will then start behaving weirdly.

I tried analyzing the page in at https://validator.w3.org but that fails because of a Fatal Error caused by another (unrelated? I think) issue… But somehow I suspect there is a closing div tag missing which could explain why the script seems to be placing the light box in the wrong place.

There are other (nasty) errors happening too with the googlemaps script, the wp-embed script and the recaptcha script. You might want to create a test page where no contact form, no google map and no special embeds (youtube or other) are featured. Just to see if it’s not one of these errors that breaks the light box.

Sorry I cannot be more specific since I cannot pinpoint the exact cause. Hope the suggestions above will help you somehow… Please let me know!