Timepicker sa objaví za modálnym - javascript, jquery, html, css, datetimepicker

Používam JQuery "s Timepicker plug in. Tu je môj kód:

<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>

Dostávam však niečo takéto:

Ako môžete vidieť, časový spínač sa objaví zaa nemám k nemu prístup. Myslím, že to má niečo spoločné s indexom z, takže s tým hrám. Momentálne som však neúspešný.

Toto som skúšal: <input id="time" class="timepicker" style="z-index:1151 !important" >

Nejaké nápady?

EDIT: Dobre, tak z nejakého dôvodu, keď sa snažím zmeniť z-index z timepicker to sa nezmení, je to ako to, že niečo prekonalo. Ak to však ručne zmením v Google Chrome Inspect okno to funguje.

odpovede:

Musíte sa prihlásiť z-index pre timepicker kontajner.

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