13

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>
Vishwas
  • 1,398
  • 8
  • 20
  • 33
  • 1
    Hi Zim I've added the code but I don't think it is specific to the code. It is bootstrap 4 dropdown functionality in general I think? Let me know thanks – Vishwas Mar 16 '18 at 15:01

4 Answers4

19

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
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    hi, I have the exact same problem, only I add the popover content dynamically on page load, I tried your `data-display="static"` but it still jumps up to the top of the viewport everytime the content does not fit the screen, please how do I make the `body` scroll, instead of the popover move, thanx – Scaramouche Oct 20 '18 at 21:45
8

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>

Dominique
  • 81
  • 1
  • 2
2

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.

Karl Johan Vallner
  • 3,980
  • 4
  • 35
  • 46
-1

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

iknow
  • 8,358
  • 12
  • 41
  • 68
IhorSh
  • 1