Fancybox Loads At Top Of Page

[James Monk]

Hi,

I have Fancybox Pro working on my development site however the pop-up and overlay is appearing at the top of the page – https://demo.starterwebsitepackage.co.uk/

Any ideas what I’m doing wrong?

Thanks,

James

[Rolf]

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!

[James Monk]

Apologies for the late reply, I didn’t receive a notification that you’d reply (or the email never reached me at least)!

Thanks for your help, looks like that height property was set by the Responsive Menu Pro plugin but adding the auto value doesn’t seem to interfere with it now works correctly!

Thanks again!

James

[Rolf]

Hi James, glad it worked out. And thank you for the feedback.

[Author]

Posts