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

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

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.

[ysds]

The .modal-content {overflow: hidden} is to prevent overflow the content in a small height screen:

But I agree the CSS cause that dropdown issue.

[tmorehouse]

Good point...

Maybe for small (short) viewports, the height of the scrollable modal could be replaced with a non-vh absolute value (or removed), and add a max height on the modal-body?

[mdo]

Is this still valid?

[moosetraveller]

Bootstrap 5.0.2 and 5.2.2

[GreathostRo]

After more than a few hours and various attempts I found the working version:

const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig(defaultBsPopperConfig) {
        return { ...defaultBsPopperConfig, strategy: 'fixed' };
    }
}));

[eugabrielsilva]

After more than a few hours and various attempts I found the working version:

const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig(defaultBsPopperConfig) {
        return { ...defaultBsPopperConfig, strategy: 'fixed' };
    }
}));

A bit late to the party, but this bug still exists. The workaround works, but I need the dropdown menu to fill 100% of the parent element's width. With the 'fixed' strategy, it fills 100% of the viewport's width. How can I achieve this?