Timepicker появляется за модальный

Question

Я использую Timepicker JQuery плагин в Вот мой код:.

<div class="form-group"> 
    <label for="time">Time of Event</label> 
    <input id="time" class="timepicker" > 
    </input> 
</div> 

<script> 

$(document).ready(function() { 
    $('input.timepicker').timepicker({}); 
}); 
</script> 

Однако, я получаю что-то вроде этого:

Как вы можете видеть, timepicker появляется позади модальная форма, и я не могу получить к ней доступ. Я думаю, что это как-то связано с индексом z, поэтому я играю с этим. Однако в это время я не увенчался успехом.

Это то, что я пробовал: <input id="time" class="timepicker" style="z-index:1151 !important" >

Есть идеи?

EDIT: Хорошо, поэтому по какой-то причине, когда я пытаюсь изменить z-indextimepicker, он не изменяется. Это похоже на то, что он что-то переопределяет. Однако, если я вручную изменил его в окне Google Chrome Inspect, он будет работать.

Answer 1

Вы должны наложить z-index на контейнер timepicker.

.ui-timepicker-container{ 
    z-index:1151 !important; 
}