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

[ivanjx]

this works for me: data-bs-popper-config='{"strategy":"fixed"}'

[bapman81]

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?

In this case, when switching to strategy: 'fixed', you also need to be sure that there is no rule to force 100% of width on your dropdown. This rule made sense with absolute but not anymore in fixed. In my project, I had to apply min-width: auto on the dropdown. This avoids taking 100% of viewport width.

Then if you want to take 100% of parent width while still in fixed, you can use the "sameWidth" community modifier from Popper : https://popper.js.org/docs/v2/modifiers/community-modifiers/

For further notice, I had another issue when switching to fixed : if the dropdown is too tall, it overflows the viewport. I used the other community modifier "maxSize" to correct this: https://www.npmjs.com/package/popper-max-size-modifier. Now there is no more overflow and my dropdown displays a scrollbar. This npm package is marked as deprecated but still very useful!