DateTimePicker s'ouvre en arrière-plan depuis l'ajout de css-animation (JSFiddle inside)

Question

J'ai un problème avec "bootstrap datetimepicker" (http://eonasdan.github.io/bootstrap-datetimepicker/) depuis que j'ai ajouté des animations via "animate.css".

J'ai créé le jsFiddle suivant:

https://jsfiddle.net/r58gwf2v/

<div class="panel panel-default animated rotateIn"> 
<div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
    Panel content 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker1'> 
     <input type='text' class="form-control" /> 
     <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
     </div> 
    </div> 
    </div> 
</div> 

Comme vous le voyez le datetimepicker s'ouvre dans l'arrière-plan. Si vous supprimez la classe "rotateIn" de la classe css, le sélecteur s'ouvre normalement.

J'ai essayé de comprendre quel est le problème avec l'index Z sans grand succès.

Answer 1

Vous devez donner au parent de <div class="panel panel-default animated rotateIn"> un z-index supérieur à son frère.

Votre code mis à jour: https://jsfiddle.net/0dkeb0dr/