A primary reason for the stacking behavior is due to the use of .col-auto in conjunction with the default flex-wrap: wrap; property of .row, causing columns to minimize and wrap accordingly.
Another factor contributing to this issue is the absolute positioning of the dropdown-menu relative to the .dropdown wrapper. Placing the wrapper on the right side limits the width expansion of the dropdown-menu.
To address these concerns:
Explore an example demonstrating how to configure your dropdown within Codeply based on your layout.
On smaller screens, column stacking is achieved by utilizing
<div class="row flex-column flex-sm-row">
. Each filter column integrates a list structure (
<ul><li>...</li></ul>
) for checkbox containment and styling flexibility.
<form class="dropdown-menu p-2 mt-1 overflow-auto">
<div class="container-fluid">
<div class="row flex-column flex-sm-row">
...
</div>
<div class="d-flex justify-content-end gap-3">
<button type="reset" class="btn btn-sm btn-warning clear-filter">Clear Filter</button>
<button type="submit" class="btn btn-sm btn-danger">Submit</button>
</div>
</div>
</form>
To control column wrapping, apply a max-width to the dropdown-menu. In the provided example, a width of 75vw is utilized for demonstration purposes, but any desired width can be specified. This approach simplifies maintenance compared to using row-cols-* and enhances visual aesthetics in column stretching scenarios.
For proper functionality of stretched-link, ensure that the parent element applies position: relative;. Additionally, maintaining whitespace: nowrap; aligns each <label> inline with its respective checkbox.
form {
max-width: 75vw;
max-height: 80vh;
}
.col li {
position: relative;
white-space: nowrap;
}
To prevent premature closure of the dropdown-menu on user interaction, include data-bs-auto-close="outside"
on the toggler <button>.