Menu icon Foundation
Reveal Modal takes up full screen on mobile 5.2.1

I upgraded from 4x to 5.2.1 and now my modals all take up the entire screen when I view them on a small screen. Is this a bug or new behavior?

reveal5.2.1

I upgraded from 4x to 5.2.1 and now my modals all take up the entire screen when I view them on a small screen. Is this a bug or new behavior?

Mitchell over 5 years ago

If its a bug, then maybe that explains another bug I found with it.

That is...
The content will not be contained in the modal if it's height is greater than the browser window height. The Modal height/width is only ever equal to the bower window. This only appears on the desktop.

On mobile its the inverse, the modal height seemed to far exceed the hight of the content.

ndh over 5 years ago

That's what is happening to me too. I have to scroll waaaay down on mobile to see the end of the modal.

Adam Kelly over 5 years ago

Same here - would love to find a solution for this.

Eberth Manjarrez over 5 years ago

Same here, please fix this.

Rafi Benkual over 5 years ago

Thats actually a feature added in 5.2.2.

You can override this in your custom stylesheet or in app.css (foundation.css)

@media only screen and (max-width: 40em) {
/* line 158, ../bower_components/foundation/scss/foundation/components/_reveal.scss */
dialog, .reveal-modal {
height: 100vh;
min-height: 100vh;
}
}

ndh over 5 years ago

Thanks Rafi good to know. I actually like it, just wasn't sure if it was a new feature.