jBox icon indicating copy to clipboard operation
jBox copied to clipboard

Dynamic content causes height of modal to exceed window height with no scrolling

Open redtopia opened this issue 2 years ago • 4 comments

After loading content into a jbox modal, the height of the modal stretches below the bottom of the window, and the window cannot be scrolled.

Ideally, I would like to reposition the modal so it is as centered as possible, and if the content exceeds the viewable area, the window can be scrolled to show the bottom of the dialog.

Great work, and thanks for your efforts!

redtopia avatar Jul 29 '22 03:07 redtopia

jBox repositions automatically if you use the method setContent(), see here: https://jsfiddle.net/StephanWagner/wyxt54g0/

Alternatively you can also use the method position() to reposition jBox, see here: https://jsfiddle.net/StephanWagner/826o9ycg/

jBox does not scroll with the window though, it scrolls within its content area, click the button in the fiddles a couple of times to see what I mean.

StephanWagner avatar Jul 29 '22 05:07 StephanWagner

This helps for sure. I'm now able to reposition the modal when I change the contents. However, in my dialog, I have a div with overflow:auto that does not scroll using the mousewheel. After seeing your fiddles, I'm wondering if perhaps your code is intercepting the mousewheel scroll event? See: https://jsfiddle.net/69dgzvh7/

redtopia avatar Jul 29 '22 19:07 redtopia

Yes, jBox isolates scrolling to the content area. See the option isolateScroll: https://stephanwagner.me/jBox/options#jbox-content

You can disable it with isolateScroll: false

But the content are of jBox still has overflow: auto

StephanWagner avatar Jul 29 '22 19:07 StephanWagner

Wonderful! Thank you!

redtopia avatar Jul 29 '22 19:07 redtopia