Created by: tmorehouse
Adds a new config option to specify the Popper.js preventOverflow.boundariesElement
, which will allow a non navbar dropdown to "overflow" its scrollParent (when the dropdown is inside an element with style overflow: scroll
, or similar), without the need to re-parent (#24257) the .dropdown-menu
(maintaining document tab order).
It also, when boundary
is not 'scrollParent'
, adds position: static;
to the .dropdown
(parent), which allows the actual overflow "escape" to happen.
The boundary
config option accepts either a string ('scrollParent'
, 'viewport'
or 'window'
), or a reference to an HTMLElement
. The default value is 'scrollParent'
(the Popper.js default value). A reference to an HTMLElement can only be passed via JavaScript options and not via the data API data-boundary=".."
.
Using position: static
only (as suggested by @FezVrasta https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786) doesn't always completely address the issue unless Popper's modifiers.preventOverflow.boundariesElement
is set to something other than 'scrollParent'
(specifically for taller dropdowns in short scroll containers)
Popovers and tooltips have a similar issue (when inside an element with overflow: scroll
). for which I have created a separate PR #24979 (which doesn't need the position: static
"fix")
/cc @Johann-S @patrickhlauke @FezVrasta
Edit: Link to demo codepen: https://codepen.io/tmorehouse/pen/GyKYZe?editors=1010
Fixes #24251 (closed)