Mutliple bootstrap-selects: numéro d'index z

J'utilise le plugin bootstrap-select pour un couple de select. Le problème est que la liste déroulante affichée pour la première sélection est derrière le bouton qui bascule la seconde sélection. Check it out (jsFiddle à la fin):Mutliple bootstrap-selects: numéro d'index z

C'est le HTML:

<div class="input-group"> 
    <input id="min-value-input" type="text" class="form-control"> 
    <div class="input-group-btn"> 
     <select class="select-time-unit"> 
      <option value="m" selected>minutes</option> 
      <option value="h">hours</option> 
      <option value="d">days</option> 
      <option value="w">weeks</option> 
     </select> 
    </div> 
</div> 
<div class="input-group"> 
    <input id="max-value-input" type="text" class="form-control"> 
    <div class="input-group-btn"> 
     <select class="select-time-unit"> 
      <option value="m" selected>minutes</option> 
      <option value="h">hours</option> 
      <option value="d">days</option> 
      <option value="w">weeks</option> 
     </select> 
    </div> 
</div>

Et bien sûr, je suis InterActions pour le plug-in:

$(function() { 
    $('.select-time-unit').selectpicker(); 
})

Le plugin génère un menu déroulant bootstrap. J'ai essayé d'augmenter la propriété z-index pour les éléments li du code HTML généré, ainsi que l'abaisser pour le bouton lui-même, mais rien de tout cela n'a fonctionné.

Voici un jsfiddle où vous pouvez voir par vous-même.

Source

2017-02-21 dabadaba

comme ça? https://jsfiddle.net/3oc6baoh/1/ –

lol ouais ça marche, tiens à expliquer pourquoi? et pourquoi abaisser le z-index du bouton ou augmenter le li ne l'a pas fait? – dabadaba

@dabadaba Les index z travaillent sur les éléments qui sont positionnés et les frères et sœurs, donc dans votre code, pour que le top select soit sur le select inférieur, vous devez monter au niveau où les éléments supérieur et inférieur sont frères et soeurs (dans Dans ce cas, les divs du groupe d'entrée) et assurez-vous qu'ils sont positionnés avec le groupe d'entrée supérieur ayant un index z plus élevé que le groupe d'entrée inférieur – Pete

les enfants Affectant ne fonctionnera pas, parce que l'ordre d'empilement ne sera plus élevé que l'élément parent (s). Vous avez juste besoin de définir un z-index plus élevé sur l'élément parent de la première .input-group. https://jsfiddle.net/3oc6baoh/1/

$(function() { 
 
    $('.select-time-unit').selectpicker(); 
 
})

.input-group.first { 
 
    z-index: 1000; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="input-group first"> 
 
    <input id="min-value-input" type="text" class="form-control"> 
 
    <div class="input-group-btn"> 
 
    <select class="select-time-unit"> 
 
     <option value="m" selected>minutes</option> 
 
     <option value="h">hours</option> 
 
     <option value="d">days</option> 
 
     <option value="w">weeks</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="input-group"> 
 
    <input id="max-value-input" type="text" class="form-control"> 
 
    <div class="input-group-btn"> 
 
    <select class="select-time-unit"> 
 
     <option value="m" selected>minutes</option> 
 
     <option value="h">hours</option> 
 
     <option value="d">days</option> 
 
     <option value="w">weeks</option> 
 
    </select> 
 
    </div> 
 
</div>

Source

2017-02-21 16:19:50

il suffit d'ajouter un z-index au parent <div class="input-group">

Source

2017-02-21 16:03:19 Centurio

Mutliple bootstrap-selects: numéro d'index z

Répondre

Questions connexes