Dropdown multi-column CSS leaks into non-navigation dropdowns #791
Description
Summary
The multi-column dropdown layout rule in scss/vendor-extensions/bootstrap-5.scss (line 63) uses an overly broad selector that affects all .dropdown-menu li elements on the page, not just navigation menu dropdowns:
.html .dropdown-menu:not(.dropdown-full-width .dropdown-menu) li {
display: block;
float: left;
min-width: var(--dxt-setting-dropdown-width);
}Since .html is on the root <html> element, this is effectively a global selector. It forces float: left and min-width on <li> elements inside any Bootstrap .dropdown-menu — including dropdowns from third-party modules, form widgets, toolbar components, and other non-navigation contexts.
Steps to reproduce
- Add any non-navigation Bootstrap dropdown component to a page using DXPR Theme (e.g., a dropdown button in page content, a CKEditor dropdown, or a contrib module toolbar dropdown)
- Open the dropdown
- Observe that
<li>elements are floated left with a forcedmin-width, breaking the expected vertical list layout
What is the current bug behavior?
All .dropdown-menu li elements on the page receive float: left, display: block, and min-width: var(--dxt-setting-dropdown-width), causing non-navigation dropdowns to display items side-by-side in a multi-column layout instead of the expected vertical list.
What is the expected correct behavior?
The multi-column dropdown styles should only apply to navigation menu dropdowns, not to dropdowns in other software components. The existing dxpr-theme-header--top.scss already demonstrates the correct pattern by scoping its dropdown rules under .block-system-menu-blockmain.
Possible fixes
Scope the selector at scss/vendor-extensions/bootstrap-5.scss:63 to .nav .dropdown-menu:not(...) instead of .dropdown-menu:not(...). This matches the JS in enhanced-dropdowns.js which specifically targets .navbar-nav > .nav-item.dropdown > .dropdown-menu.