Fomantic-UI icon indicating copy to clipboard operation
Fomantic-UI copied to clipboard

Modal + dropdown pointing overflow window

Open dutrieux opened this issue 6 years ago • 3 comments
trafficstars

Bug Report

When I click a dropdown (type pointing without scrollbar), the scrollbar of window is not display when the content of dropdown overflow the window. When I enable the observeChanges option of modal to true, that doesn't work the first time a click the dropdown but the second time a click, the modal is display on the top of window (strange :s) and the scrollbar appears

Expected result

Scrollbar appear properly

Actual result

Scrollbar doen't appear properly

Testcase

https://jsfiddle.net/dutrieux/sj5or8bk/27/

Screenshot (when possible)

modal

Version

2.7.2

dutrieux avatar Mar 12 '19 08:03 dutrieux

:thinking: You already provided the fix by using the modal-setting observeChanges It's natural IMHO otherwise that the modal should not create the scrollbar as long as the modal itself does not increase in size

lubber-de avatar Mar 13 '19 08:03 lubber-de

Got your point, but it's still not easy to fix, because the openened dropdown enhances the DOM height and after the modal refreshes by the observer, the modal gets the information that the whole modal does not fit into the viewport anymore (but it does not analyze the reason, so does not know it's the dropdown menu which is causing it), thus the modal gets positioned to the top by default.

For now the only workaround is to add scrolling to the dropdown. IMHO this is also more natural UI wise. https://jsfiddle.net/yn6d4atv/1/

lubber-de avatar Mar 13 '19 09:03 lubber-de

For now the only workaround is to add scrolling to the dropdown. IMHO this is also more natural UI wise.

Iam ok with that !

dutrieux avatar Mar 13 '19 09:03 dutrieux