How can I make Foundation 5 reveal modal scrollable when it's too big?

Question

I am using a reveal modal. The content can be too big to fit on the screen depending on the window size.

No matter what I do, I can't scroll to see all the content. I tried making the modal itself overflow-y:auto;, but this didn't help.

The screenshot below is from a chrome window that is set to the size of a mobile device. There is a button at the bottom of the form that can't be pressed because it can't be seen.

The window nor the modal contents will scroll. Also the top of the modal seems to be too low, but that doesn't seem to change anything with the accessibility of the button at the bottom.

Answer 1

You have to mention the threshold height for the reveal-modal, after which the overflow-y will be considered and a scroll bar will appear.

.reveal-modal
{
  max-height:initial; //reset any max-height set by foundation defaults
  height:600px; //replace value with your desired height
  overflow-y:scroll;
}

Answer 2

I was able to set the height to 60% with a top margin of 20% and 100vh when in mobile mode. I also had to change the dialog position to fixed and disable the scroll setting, which I think was a new addition after 5.2.2 which would explain why I only recently starting having this issue after updating. This is what I was able to do:

https://github.com/macdabby/Lightning/commit/202ae9156ebf034c8cb4b625161015763fa0658f

Answer 3

Add the class "full" to "reveal-modal" and the height will be set to 100% scrollable:

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

In this mode, I noticed that the background overlay (shadow & border) had issues, so i added the following CSS to remove the background overlay:

<style>
.reveal-modal {
    border:0 none;
    box-shadow:none;
}
.reveal-modal-bg {
    background-color: transparent;
}
</style>

Here's my example page