Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

[bug] Dropdown inside scrollable body modal clipped and/or inaccessible

Created by: tmorehouse

Version 4.3.1

When one has a scrollable body modal, with a dropdown inside, and the model content is short, the opened dropdown gets cut off/hidden, and in some cases on desktop, impossible to scroll to select the last dropdown menu item. Changing the boundary option of dropdown does not correct the issue.

image

Reproduction: https://codepen.io/anon/pen/XGEwPV?editors=1000

After playing a bit, I was able to come up with a workaround:

  • add class .position-static to the .modal-body
  • override the style overflow: hidden; on the .modal-content div with overflow: initial; (as the SCSS defines it as overflow: hidden; for some reason in scrollable mode).
  • add data-boundary="viewport" (or window) to the dropdown button

Working example: https://codepen.io/anon/pen/rRdggJ?editors=1000

Possible fix: When the modal is in scrollable body mode, add the above position: static to .modal-body rule, and remove overflow: hidden; on .modal-content (which appears to be added only in scrollable mode)

Then it would be up to the user to apply the boundary to the dropdown if needed.