"More" facets modal not scrollable on Blacklight 8/Bootstrap 4

[jrochkind]

In my app, in BL7/Bootstrap 4, if the "more" modal for facets was too big for the screen, then scrolling the window would scroll the modal, allowing the user to access all modal content:

Screen.Recording.2023-07-03.at.4.32.55.PM.mov

But in BL8/Bootstrap 4, when this happens, scrolling the window scrolls the background content, leaving the modal content fixed.

Screen.Recording.2023-07-03.at.4.34.54.PM.mov

This means at screen sizes where the entire modal does not fit on screen, much of the modal content (including the action buttons at the bottom) can not be seen or accessed.

We can make the "more facets" modal include fewer rows per page with configuration, but since there is no way to predict the viewport size, there is no way to guarantee it will all fit in the viewport.

I can not reproduce this on https://demo.projectblacklight.org/ -- my hypothesis is that this only effects Bootstrap 4, and the demo is using Bootstrap 5.

I wonder if anyone else can reproduce this, or if it's affecting anyone else?

[jrochkind]

I suspect this is a problem specific to Bootstrap 4 and Blacklight 8.

Blacklight 8 does intend to be usable with Bootstrap 4, yes? If it is a BS4 issue, perhaps we can figure out exactly what's going on and how to fix it so it still works with Bootstrap 4.

[jrochkind]

I have discovered blacklight_config config.bootstrap_version = 4, which I didn't know about .

However setting it does not seem to change/fix this issue.

It may show the path to fixing this issue, since it may be possible to use that config to generate different modal HTML mockup for bootstrap 4 and 5.

[jrochkind]

Huh, actually the bootstrap markup for modals in Bootstrap 4 vs 5 looks possibly identical....

https://getbootstrap.com/docs/4.0/components/modal/

https://getbootstrap.com/docs/5.3/components/modal/

Although neither looks quite like the blacklight markup, it's missing lots of wrapper divs shown in bootstrap examples?

https://github.com/projectblacklight/blacklight/blob/48d8a7078437f8dd6ac6db5db60251905f252816/app/components/blacklight/system/modal_component.html.erb

Confirmed that both bootstrap 4 and 5 docs say that the modal is supposed to scroll with main scrollbars when it has too much content for screen.

Haven't really gotten to the bottom of what's going on.

[jronallo]

I'm also experiencing this issue where the background scrolls and not the content of the modal.

[jronallo]

Because I already had an application with a modal I had previously created a _blacklight_modal.html.erb partial. Adding the modal-dialog-scrollable class to the modal-dialog div fixed this for me.

[jrochkind]

Thank you @jronallo , I will try that out!

Perhaps it's something needed for Bootstrap 4 but not 5, and needs to be added conditionally. I'll check with it with that hint, I had not figured out anything on my own!

[jrochkind]

@jronallo Adding modal-dialog-scrollable does get me that behavior where dialog is fixed on-screen but allows internal content to scroll...

But that's actually not the behavior I had before, and which bootstrap (4 and 5) is supposed to support, where dialog box overflows screen, but scrolling the window scrolls it.

modal-dialog-scrollable

The new behavior you can opt in to with modal-dialog-scrollable class added, which does work if you add that class:

scrollable-dialog.mov

(there's also an unusually large margin below dialog?)

original behavior

This is what I get in BL7, without modal-dialog-scrollable, and would still like to get

original.mov

BL8 behavior

And this is what I actually get in BL8 with Bootstrap 4, unusable.

250656577-ffc7db16-ec61-46e3-9adb-e25435e20dd1.mov