Skip to content

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

@tmorehouse

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions