Foundation-sites: Foundation 6 Reveal modals have extreme top offset

[ghost]

When using Reveal, my modals end up with extreme top offset styles like top: 1374.84px which pushes the modal out of the viewport and to the very end of the page.

What I expected to happen
The modal to use the $reveal-offset variable in settings.scss to set the offset from the top of the viewport/window by the specified amount (e.g. 10px)

What actually happened
The modal pops up further down the page, pulling the user with them. This happens even when I only use the base Foundation styles (in the foundation-rails gem) and make sure my modal code is positioned at the top or bottom of the body outside of any row/column formatting code).

Full layout here:

What happens when the modal pops up:

With the image above, you can see how far down the page the modal appears. Other modal trigger links situated higher than the Report button also share the same fate.

[kaydwithers]

I'm having a similar problem with reveal. Except no darkened overlay shows at all. I submitted an issue but zurbchris claimed it was not an issue and closed it.

[ghost]

That sounds really frustrating @kaydwithers :disappointed: I can't even see where these inline styles are being determined, although in my case the overlay shows properly behind the modal. I thought it could be my CSS overrides but no.

[kaydwithers]

I think it's a bug, I'm using the ZURB template and I started a fresh install and the same thing happens. It only happens in the dist folder after "npm run build". If I run "foundation watch" the overlay shows up fine. I think our issues are related. Hopefully someone can help.

[colin-marshall]

@kaydwithers it looks like foundation watch is the same as running npm run start, which is the same as running just gulp. npm run build is the same as running gulp build --production. Try running just gulp build and see if the overlay works. If it does work, then the problem is narrowed down to the inclusion of the --production flag.

[kaydwithers]

@MatthewHeath Are you using CSS minification? I think gulp-uncss might be causing our problems.

[colin-marshall]

@kaydwithers that's where I was headed next. gulp-uncss is probably the issue, but it doesn't do the minification, it removes unused classes. UnCSS may have removed the classes you need for Reveal because they aren't added to the DOM until a reveal modal is opened.

[ghost]

@kaydwithers I'm not using CSS minification at the moment. I use foundation through the foundation-rails gem which is currently v6.1.2.0 on master branch at zurb/foundation-rails.

I posted the issue here because as far as I can tell, foundation-rails just builds a specified version of foundation-sites and configures it for use in the various asset directories Rails has (and it's therefore not a gem-specific issue).

[kaydwithers]

@colin-marshall Yes you are correct "gulp build" works. I can run that instead, but it would be handy if the CSS was minified. I don't suppose there is a way to get minification to work properly?

I don't think our issues are related sorry Matthew. :/

[colin-marshall]

@kaydwithers uncss and minify both run with the production flag. You can comment out all of the uncss references in gulpfile.js.

Here are the lines you should comment out:
https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.js#L105-L111
https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.js#L124

[ghost]

After further investigation, I've discovered two things:

1. The issue _may_ be related to some row/column nesting I'm doing to create a resizable forum post layout. This feels like the likely culprit because when I remove the forum post layout code, the reveal modals go back to semi-normality. (There is still some top offset, but not as major as when the forum post layout code is included).
2. If I copy and paste the generated source code HTML from my Rails project into, say Yeti Client or a brand new Rails project, the issue goes away until I revert to creating the forum post layout like you would in an ordinary Rails project and all the reveal modals start acting weird again.

Edited to add link to CodePen setup for ease of future debugging

[zurbchris]

@kaydwithers if you post a codepen or demo site link, I'd be happy to take a look for you. Your issue didn't seem like a bug, as the overlay element isn't generated with foundation watch.

For everything else in this thread, please take a look at this branch if you have the time. I stripped out and simplified the positioning method for Reveal, which should be in an upcoming release. Let me know if there's something still not working that should be.

[RLHawk1]

I'm running into the same issue and after many hours trying to figure out why, I found that it's because the "Essential" package doesn't include the following in the CSS, and without it, reveal doesn't position elements correctly at all. Adding this to my css fixed everything.

html, body {
  height: 100%;
}