How to display ui timepickr on front using z-index?

[maxylynx]

Inside colorbox, I am using timepickr. The problem is timepickrcontent cut down at edge of colorbox due to overflow: hidden.Here I pasted some code, // javascript code written by me\[code\]jQuery(".transportPopup").colorbox({initialWidth: 150,initialHeight: 150,width: 920,scrolling: false,transition: "elastic",opacity: 0.3}, function() { // timepickr on textbox to choose time jQuery("#start_time, #end_time").timepickr({updateLive: false, trigger: "focus" });});\[/code\]The above script crates colorbox popup with html, \[code\]<div id="colorbox" style="padding-bottom: 42px; padding-right: 42px; display: block; width: 878px; height: 277px; top: 285.5px; left: 44px;"> <div id="cboxWrapper" style="height: 319px; width: 920px;"> ...... <div id="cboxContent" style="float: left; width: 878px; height: 277px;"> <div id="cboxLoadedContent" style="display: block; width: 878px; overflow: hidden; height: 277px;"><div> <div style="position: relative; z-index: 1;"> <label class="lblText floatLeft" for="departure_time"><span class="star">*&nbsp;</span>Departure time:&nbsp;</label> <input type="text" class="inputText w50" readonly="readonly" value="" id="departure_time" name="departure_time"> <!-- CODE GENERATED BY TIMPICKR --> <div class="ui-helper-reset ui-timepickr ui-widget" style="left: 309.3px;"> .......... </div> </div> ...... </div> \[/code\]// css of colorbox defined by its author \[code\]#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}\[/code\]// css of timepickr defined by its author \[code\].ui-timepickr {position:absolute;width:480px;top:22px;display:none;z-index:99999;\[/code\]}If I change css of colorbox and make "overflow" property to "visible"then scrollbar appear on the page and width becomes doubled of thepage.