Inside colorbox, I am using timepickr. The problem is timepickr content cut down at edge of colorbox due to overflow: hidden.
Here I pasted some code,
// javascript code written by me
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" });
});
The above script crates colorbox popup with html,
<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">* </span>Departure time: </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>
// css of colorbox defined by its author
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
// css of timepickr defined by its author
.ui-timepickr {
position:absolute;
width:480px;
top:22px;
display:none;
z-index:99999;
}
If I change css of colorbox and make "overflow" property to "visible" then scrollbar appear on the page and width becomes doubled of the page.