Bootstrap 4 Dropdown - Disable auto placement caused by popper.js

Question

I\'m working with Bootstrap 4 dropdown and there are about 18 dropdown items. Because the height is too much, popper.js automatically moves the dropdown away from its origin

Answer 1

ZimSystems got it almost right in Bootstrap 4.1. To disable the dropdown changing direction while open, aka. it's x-placement="bottom-end", you should use the "flip" option, instead of the "display" option.

Display static disables the positioning entirely, while flip only disables the LIVE checks, that flip the dropdown upside down, when you scroll towards the top of the screen.

Answer 2

Bootstrap 4.1

There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static" to prevent popper.js from dynamically changing the dropdown position...

Bootstrap 4.0

There are some issues with popper.js and positioning.

I've found the solution is to position-relative the .dropdown, and set it as the data-boundary="" option in the dropdown toggle: https://www.codeply.com/go/zZJwAuwC5s

  <div class="dropdown position-relative" id="dd">
        <button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            ...
        </div>
   </div>

The boundary is set to the id of the dropdown. Read more about data-boundary.

---

Related questions:
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4

Answer 3

In options, you can try to change dropupAuto : true to dropupAuto : false. https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version

Answer 4

I achieved this in Bootstrap 4.3.1 by adding data-flip="false" to the dropdown element.

ex: <a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>