DateTimePicker opens in Background since added css-animation (JSFiddle inside)

Question

I have a problem with "bootstrap datetimepicker" (http://eonasdan.github.io/bootstrap-datetimepicker/) since I added animations through "animate.css".

I have created the following JSFiddle:

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>

As you see the datetimepicker opens in the Background. If you remove the css-class "rotateIn" the picker opens normally.

I tried to figure out what the problem is with theZ index without any major success.

Answer 1

You should give the parent of <div class="panel panel-default animated rotateIn"> a higher z-index then its sibling.

Your updated code: https://jsfiddle.net/0dkeb0dr/