Bootstrap | Datepicker sous modal

Alex
Les bases HTML/CSS

Salut tout le monde,
j'ai un léger problème enfaite avec mon code, je m'explique:

J'ai un modal permettant de bannir un joueur, et ce modal doit définir une date de débanissement, donc je met un date picker, or ce datepicker se met comme ceci:

Et donc le datepicker est sous le modal, et pas dessus comme je l'espère avoir.
J'ai vu que il fallait mettre un z-index, mais ça ne marche toujours pas...

Voici le code:

                    <div class="form-group">
                        <label for="deban" class="control-label">Date de débanissement:</label>
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text" class="form-control pull-right datepicker" readonly="readonly" id="datepicker">
                        </div>
                    </div>
    $('#datepicker').datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: '+1d',
            changeMonth: true,
            changeYear: true
        });

Merci pour la futur aide apportée.

5 réponses

Kiv

Salut
pour que ton z-index fonctionne, il faut que tu le mette en absolute.
sinon il est vrai que le style du datepicker a quand même été modifié.
je pense que cela est pris en compte par d'autre stylesheet de ton site

Alex
Auteur

Voilà ce que ça donne mon css, (avant ton commentaire)

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1051 !important;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.428571429;
}

Comme tu peux le voir c'est déjà en absolut.

Kiv

Dans ce cas c'est d'inspecter l'overlay, puis regarder son z-index.

Alex
Auteur

C'est 1050, or j'ai mis 1051... :x

Kiv

lol d'accord.