1

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.

enter image description here

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
DAB
  • 1,303
  • 14
  • 23

3 Answers3

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;
}
Hari Harker
  • 702
  • 1
  • 12
  • 29
  • The problem with this is that now it's a fixed height which won't always work depending on the screen size. I did figure out another way although I think it's a bandaid. – DAB Jul 26 '16 at 19:40
  • If using with multiple screens is your problem, then you can mention different height for different screens using css media queries. Or, you can also mention `%` values instead of `px`values. But yet again you will have to use media queries if you are aiming for perfection. – Hari Harker Jul 27 '16 at 06:13
0

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

DAB
  • 1,303
  • 14
  • 23
0

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

asonnenshine
  • 235
  • 1
  • 6