web-dev-qa-db-fra.com

Forcer Bootstrap menu déroulant pour toujours afficher en bas et lui permettre de sortir de l'écran

Lorsqu'il n'y a pas d'espace au bas de la fenêtre pour s'adapter au menu déroulant, il s'affiche en haut de son bouton déroulant. Est-il possible de modifier ce comportement et de faire en sorte que la liste déroulante apparaisse toujours en bas?

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
drop-down-menubootstrap-4popper.js
13
negativefix

Je voulais résoudre ce problème avec CSS seul.

La liste déroulante de Bootstrap utilise Popper.js pour le positionnement du menu déroulant. Cela rend la tâche difficile car Popper.js semble vérifier et évaluer la position de la liste déroulante lorsque la fenêtre est défilée, j'ai donc dû utiliser un !important règle pour remplacer Popper.js.

Voici le code que j'ai trouvé, basé sur votre exemple.

.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}

Exemple de codepen: https://codepen.io/Washable/pen/xPdqVp

Cela forcera toujours la liste déroulante à être en dessous du bouton, même si le bouton est en bas de l'écran.

8
TidyDev

Pour Bootstrap ≥ 4.1

Désactivez complètement Popper.js positionnement dynamique en définissant data-display="static" sur dropdown-toggle élément (bouton ou lien).

De Bootstrap Docs> Dropdowns: Options :

Par défaut, nous utilisons Popper.js pour le positionnement dynamique. Désactivez ceci avec statique .

.window {
  height: 8em;
  overflow: auto;
  margin: 1em;
  padding: 1em;
  border: 10px solid #DFEAF2;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="window">
  <div class="dropdown">
    <button data-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown dropdown-toggle with data-display="static"
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>
16
Matěj Kříž

Bootstrap 4 utilise Popper.js pour positionner les listes déroulantes. De plus, Bootstrap 4 vous permet de passer data-* attributs pour contrôler le comportement de Popper.js dans cette liste déroulante.

L'option qui doit être modifiée est l'option flip de Popper.js. Par défaut Bootstrap 4 définit cela sur true, ce qui fait apparaître des listes déroulantes au-dessus de l'élément de liste déroulante lorsqu'il n'y a pas assez de place au bas de la fenêtre.

Pour forcer la liste déroulante à toujours apparaître en bas, ajoutez data-flip="false" comme attribut de votre dropdown-toggle élément. Par exemple:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-flip="false" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
12
ryanlerch