Bootstrap | Datepicker sous modal

Par Alex, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

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

Alex, il y a 10 ans

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

Kiv, il y a 10 ans

lol d'accord.