Overlay popups appearing off-screen

Permalink
I've used C5 for 4 different sites now and have never encountered this issue! The overlay popups are appearing off-screen, where I cannot access them. They tend to appear in random spots, depending on which area of the page I am editing. Please see photos - these show the edit window cut off by the top and bottom of my browser window, but sometimes the popup will not even be visible.

Any advice???

Thank You!

2 Attachments

 
JohntheFish replied on at Permalink Reply
JohntheFish
Is it a new theme?
Is there a mismatched html div to /div (or any other element)?
wilfordbrimley replied on at Permalink Reply
Hello,

Yes, it is a custom theme using Foundation5 framework (which I have used for my other sites). I have been through my code several times and I just cannot for the life of me find out what could be causing the problem.

If someone would be willing to take a look I have opened it up:

I simply cannot continue with development if this problem persists, because the further down the page I get, the farther off-screen the editor appears and I can't access it. =(
ob7dev replied on at Permalink Reply
ob7dev
I'm having the same issue, but unable to track down whats causing it. All I know is it is theme specific, as if I enable a different theme the problem goes away.

I've tried all of the following to no avail:
Uninstall all custom plugins
Completly remove custom styles (and problem persists)
Checked for html syntax errors.
Tried providing jquery instead of requiring it.

Anyone have a clue as to where the heck I screwed this up and how to fix it. I'm suprised that unlinking the stylesheets didn't fix it.

I've even made a new page template that has nothing but concrete includes and a body tag with one area. Modals still show up off page. Theres no overrides, not css imports, no page_theme file, its completly stripped down to nothing and modals still show up off screen. But if I enable another theme modals show up how they should. I've cleared cached many times during this process, and I am completely stumped thinking I may need to rebuild the entire template. Is there something in the database that would be causing this?
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi ob7dev,

I believe this discussion is related to version 5.6 and early of concrete5.

Do the modals show up off page only with custom themes you have made?

Please zip the offending theme and attach it as a reply and I can take a look at it.
ob7dev replied on at Permalink Reply
ob7dev
Its happening in a 5.7 theme. Heres the file.

http://archebian.org/best_inspection.zip...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@ob7dev

You have multiple issues in the theme. I believe the issue causing the form modal problem is from using too many includes and/or the way they are being loaded. This is causing jQuery UI to improperly calculate the top position of the formal modal - causing it to be far too low.

Also, your CSS is global and not scoped to .ccm-page and you are using Bootstrap 4 grid layout classes and using "bootstrap3" grid within page_theme.php.
protected $pThemeGridFrameworkHandle = 'bootstrap3';
ob7dev replied on at Permalink Reply
ob7dev
As for the includes, I thought using the built in include function was the way to go? I know I'm using bootstrap4, but its been working just fine as long as flexbox is turned off. As for the ccm-page declaration, can you explain that a little more to me?

I've tried removing all includes and just putting the code they import in their place, but still have rendering issues...
I've tried removing the page_theme altogether and just using a description.txt, then reinstall the theme, but still have issues.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@ob7dev

I believe the Bootstrap 3 and 4 grids are different. If so, you should be creating a "bootstrap4" grid framework (since the Bootstrap 4 grid is said to be final, this should be considered as a new default in the upcoming v8).
http://documentation.concrete5.org/developers/designing-for-concret...

Using your theme, I was able to comment out some of the includes to resolve the form modal generation issue.

The getPageWrapperClass() method used on the theme page wrapper div, adds the class "ccm-page". The concrete5 interface uses other classes often starting with "ccm-", like "ccm-ui" and "ccm-toolbar". By scoping/namespacing your CSS to .ccm-page, you avoid your theme CSS with conflicting/overriding the interface.

Here is an excellent tutorial on the topic by JohntheFish:
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...
ob7dev replied on at Permalink Reply
ob7dev
Hi MrKDilkington, and thanks for your help.

When I remove the includes, I still have the modals showing up off screen, or atleast somewhat off screen. Its still very peculiar to me why this is happening. My other themes don't do this. Thanks for this links!

EDIT: You know something weird, I just tested 5.8, and modals are showing up slightly off screen there as well. This makes me think something might be going on with my browser?

EDIT AGAIN: MrKDilkington was right all along, the only problem was the template structure.
wilfordbrimley replied on at Permalink Reply
So after going through my CSS again line by line, an overflow style is what was causing the problem:

html {
overflow-x: hidden;
}

Sometimes I add this so that a Facebook like box or Pinterest widget will not expand horizontal scroll on mobile view, as they are often too wide. After removing it the editor / overlay / window popups now appear in the middle of screen like before.

Found a couple of past threads about this same issue with no replies so hopefully this helps someone at some point!