Scroll on Modal

[Seb-]

What is the status of having scroll bar inside modals?

I tried with 1.2.6: I have a modal that is too big (vertically) for the window and I would like it to have a scroll bar, but it doesn't seem to work.

What is the best solution for this?

[soumak77]

I use the following SCSS to achieve this:

.modal-overlay {
  .modal {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

[soumak77]

Or if you want your modal to contain a grid:

aside {
  display: flex;
}

[Seb-]

Thank you.

The first solution works like I would like and is plug and play with any modal and any window size, but with a little problem, tested with latest Firefox: the scrollbar from the modal seems to be overlapping with the scrollbar of the window. It's fine when scrolling with wheel or keyboard or whatever since the modal has the focus, but the double scrollbar itself is confusing.

The second solution is cleaner (doesn't have that issue) but it requires a very specific modal structure to look correctly, and if the fixed grid elements inside are still too big for the window size, the issue of unreachable content will still be there.

Is it possible to make a solution with best of both worlds?

And in either case this information would be useful in the doc.

[soumak77]

Is it possible to make a solution with best of both worlds?

You could try the first solution to get the scrolling to work, then wrap all the content inside your modal in a grid-block.