Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

When there is no room at the bottom of the viewport to fit dropdown menu, it is displayed at the top of its dropdown button. Is it possible alter this behavior and make dropdown always appear at the bottom?

    <div class="dropdown">   <button class="btn btn-secondary 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> 
like image 794
negativefix Avatar asked Nov 11 '17 20:11

negativefix


People also ask

How do I change the position of a drop down menu in Bootstrap?

Use data-offset or data-reference to change the location of the dropdown.

How do I keep my Bootstrap dropdown open?

Just wrap the contents of the menu in a form tag. That's it.

How do you prevent the dropdown from closing by clicking outside?

For Bootstrap 4, look for the clickEvent , and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked. In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target.

How do I stop Bootstrap dropdown from closing?

By choosing false, the dropdown menu can only be toggled by clicking on the dropdown button. the inside makes the dropdown disappear only by choosing a menu item and the outside closes the dropdown menu only by clicking outside.


2 Answers

For Bootstrap 5 (≥ 5.0)

Completely disable Popper.js dynamic positioning by setting data-bs-display="static" on dropdown-toggle element (button or link).

From Bootstrap 5 Docs > Dropdowns: Options:

By default, we use Popper.js for dynamic positioning. Disable this with static.

.window {     height: 8em;     overflow: auto;     margin: 1em;     padding: 1em;     border: 10px solid #DFEAF2; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>  <div class="window">     <div class="dropdown">         <button data-bs-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">             Dropdown dropdown-toggle with data-bs-display="static"         </button>         <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">             <li><a class="dropdown-item" href="#">Action</a></li>             <li><a class="dropdown-item" href="#">Another action</a></li>             <li><a class="dropdown-item" href="#">Something else here</a></li>             <li><a class="dropdown-item" href="#">Action</a></li>             <li><a class="dropdown-item" href="#">Another action</a></li>             <li><a class="dropdown-item" href="#">Something else here</a></li>         </ul>     </div> </div>

For Bootstrap 4 (4.1 - 4.6)

Completely disable Popper.js dynamic positioning by setting data-display="static" on dropdown-toggle element (button or link) .

From Bootstrap 4 Docs > Dropdowns: Options:

By default, we use Popper.js for dynamic positioning. Disable this with static.

.window {   height: 8em;   overflow: auto;   margin: 1em;   padding: 1em;   border: 10px solid #DFEAF2; }
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="window">   <div class="dropdown">     <button data-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">       Dropdown dropdown-toggle with data-display="static"     </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>       <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>
like image 140
Matěj Kříž Avatar answered Sep 24 '22 23:09

Matěj Kříž


I wanted to tackle this problem with CSS alone.

Bootstrap's dropdown's uses Popper.js for the positioning of the dropdown menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.

Here's the code I came up with, based on your example.

.dropdown-menu{     transform: translate3d(5px, 35px, 0px)!important; } 

Example codepen: https://codepen.io/Washable/pen/xPdqVp

This will always force the dropdown to be below the button, even if the button is at the bottom of the screen.

like image 39
TidyDev Avatar answered Sep 26 '22 23:09

TidyDev