web-dev-qa-db-fra.com

Bootstrap 4 Dropdown - Désactive le placement automatique causé par popper.js

Je travaille avec la liste déroulante Bootstrap 4 et il y a environ 18 éléments déroulants . En raison de sa hauteur trop élevée, popper.js déplace automatiquement la liste déroulante de sa position d'origine au haut de l'écran. Comment puis-je empêcher cela? Je veux toujours que la liste déroulante apparaisse juste en dessous du bouton qui la fait basculer . Merci.

Publier le code comme demandé - (J'utilise C # mais le code devrait transmettre le point que j'espère)

             <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>
csstwitter-bootstrapbootstrap-4popper.js
4
Vishwas

Bootstrap 4.1

Il existe une nouvelle option "display" qui désactive le positionnement par menu déroulant popper.js. Utilisez data-display="static" pour empêcher Popper.js de modifier dynamiquement la position du menu déroulant ...

Bootstrap 4.0

Il y a quelques problèmes avec popper.js et le positionnement.

J'ai trouvé la solution consiste à position-relative le .dropdown et à le définir comme option data-boundary="" dans la liste déroulante: 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>

La boundary est définie sur la id du menu déroulant. En savoir plus sur data-edge } _.

Questions connexes:
Bootstrap 4: Pourquoi le popover dans le menu déroulant ne s’affiche pas?
Défilement d'une liste déroulante dans un modal dans Bootstrap4

8
Zim

ZimSystems a tout à fait raison dans Bootstrap 4.1. Pour désactiver le menu déroulant, changez de direction en mode ouvert. c'est x-placement = "bottom-end", vous devriez utiliser l'option "retourner", au lieu de l'option "afficher". 

L'affichage statique désactive complètement le positionnement, tandis que la bascule ne désactive que les contrôles LIVE, qui retournent la liste déroulante lorsque vous faites défiler vers le haut de l'écran.

1
Karl Johan Vallner