I am utilizing the "btn-toolbar" class from bootstrap to contain multiple "btn-group" class dropdown buttons on a single line. For smaller screens, I want the btn-toolbar div to have a fixed width so that it can be horizontally scrollable. To achieve this, I need a parent div to enclose the "btn-toolbar" and apply CSS property overflow-x: scroll, allowing the btn-toolbar to maintain its width off-screen.
The main problem arises when the parent div is added, as the dropdown menus end up partially obscured behind the parent div. If I remove the parent div (and consequently lose the horizontal scrolling ability), everything functions properly. The issue also disappears when using direct sibling divs. Is there a way to adjust the elements involved to retain the parent div?
Please share any suggestions you may have!
I have attempted adjusting the z-index of all related divs and dynamic classes associated with the dropdown.
<div class="wrapper">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-outline-primary dropdown-toggle"
type="button" id="dropdownMenuButton" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else
here</a>
</div>
</div>
</div>
.wrapper {
width: 100%;
overflow-x: scroll;
border-bottom: solid 1px #ccc;
}
.wrapper::-webkit-scrollbar {
display: none;
}
.btn-toolbar{
min-width: 1000px;
}
.btn-toolbar button {
padding: 2px 8px;
margin: 8px 5px;
color: #1eafed;
border-color: #1eafed;
}
Anticipated behavior was for the dropdowns to appear correctly when triggered, instead, they are hidden behind the bottom part of the wrapper div (which is only around 50px tall).