Bootstrap4: Is there a way to nest a bootstrap "btn-toolbar" in order to make it x-axis scrollable on smaller screens?

Question

I'm using bootstrap's "btn-toolbar" class to house a few "btn-group" class dropdown buttons on the same line. I want the btn-toolbar div to have a fixed with so that it can be x-axis scrollable on smaller screens, so I need a parent div to house the "btn-toolbar" in order to make it ovreflow-x: scroll, and have the btn-toolbar retain it's width off-screen.

The issue is, with the parent div in place, the dropdown menus are partially hidden behind the parent div. When I remove the parent div (and the ability to x-axis scroll), it works just fine. It also works with divs directly under it. Is there a way to manipulate the elements associated so that I can keep the parent div?

Any ideas are greatly appreciated!

I've tried changing the z-index of all the associated 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;
}

I expected the dropdowns to show on unfurl, but instead they seem to be hidden behind the bottom of the wrapper div (only about 50px tall) and beyond.

Akber Iqbal Akber Iqbal · Accepted Answer · 2019-08-01T07:16:17

The dropdown which opens up has the property 'position:absolute' which means that it will follow the confines of its parent... and in the parent class wrapper you had defined overflow-x: scroll;;

to get around this, we had to overwrite this position:absolute property, which we do using this:

.wrapper > .btn-toolbar > .show > .show { position:fixed !important;     left: auto !important; }

complete working snippet below:

.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;
}

.wrapper>.btn-toolbar>.show>.show {
  position: fixed !important;
  left: auto !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<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 class="btn-group">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
                Dropdown button #2
         </button>
      <div class="dropdown-menu" aria- labelledby="dropdownMenuButton2">
        <a class="dropdown-item" href="#">2 - Action</a>
        <a class="dropdown-item" href="#">2 - Another action</a>
        <a class="dropdown-item" href="#">2 - Something else here</a>
      </div>
    </div>
  </div>
</div>

Bootstrap4: Is there a way to nest a bootstrap "btn-toolbar" in order to make it x-axis scrollable on smaller screens?

1 Answers