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 original position to the top of the screen. How do I prevent this? I always want the dropdown to appear right below the button that toggles it. Thanks

Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)

             <div class="dropdown">
                <span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @topMenu.Name
                </span>
                <div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
                    @foreach (var subMenu in topMenu.SubMenu)
                    {
                        <a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)">@subMenu.Name</a>

                    }
                </div>
            </div>

Answer 1

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>

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

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.