wake-up-neo.net

Bootstrap 4 Dropdown - Deaktiviert die durch popper.js verursachte automatische Platzierung

Ich arbeite mit Bootstrap 4 Dropdown und es gibt ungefähr 18 Dropdown-Elemente ... Da die Höhe zu hoch ist, verschiebt popper.js das Dropdown-Menü automatisch von seiner ursprünglichen Position an den oberen Rand des Bildschirms. Wie kann ich das verhindern? Ich möchte immer, dass das Dropdown-Menü direkt unter der Schaltfläche erscheint, mit der es umgeschaltet wird. Danke

Buchungscode wie gewünscht - (Ich verwende C #, aber der Code sollte den Punkt vermitteln, den ich erhoffe.)

             <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>
4
Vishwas

Bootstrap 4.1

Es gibt eine neue "Anzeige" -Option, die die Positionierung von popper.js deaktiviert. Verwenden Sie data-display="static" für verhindern, dass popper.js die Dropdown-Position dynamisch ändert ...

Bootstrap 4.0

Es gibt einige Probleme mit popper.js und der Positionierung.

Ich habe festgestellt, dass die Lösung darin besteht, position-relative den .dropdown zu setzen, und diese Option als data-boundary=""-Option in der Dropdown-Liste festzulegen: 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>

Die Variable boundary ist auf die Variable id der Dropdown-Liste gesetzt. Lesen Sie mehr über Datengrenze .


Verwandte Fragen:
Bootstrap 4: Warum wird Popover im scrollbaren Dropdown nicht angezeigt?
Scrollen in einer Dropdown-Liste in einem Modal in Bootstrap4

8
Zim

ZimSystems hat es in Bootstrap 4.1 fast geschafft. So deaktivieren Sie die Dropdown-Richtungsänderung im geöffneten Zustand. Es ist x-placement = "bottom-end". Sie sollten die Option "Flip" anstelle der Option "Anzeige" verwenden. 

Bei der Anzeige statisch wird die Positionierung vollständig deaktiviert, während bei der Flip-Funktion nur die LIVE-Prüfungen deaktiviert werden, die die Dropdown-Liste auf den Kopf stellen, wenn Sie zum oberen Bildschirmrand blättern.

1