dhtmlxCalendar + dhtmlxCombo

I have an input box with a popu calendar attached. And two dhtmlxCombos below it. When the popup calendar is shown, it is overlapping those combos. But the combos are showing on the top of calendar. Why so?

Most probably problem caused by some specific of your HTML layour ( at least it can’t be reconstructed with local samples )
Please try to increase z-index of calendar, it can be adjusted at dhtmlxcalendar.css

.dhtmlxcalendar {
    background: url(imgs/cal_bg_single.png) no-repeat;
    border: 0px solid green;
    font-family: Arial;
    z-index:99;

I’ve made a simple test page to show this effect. It doesn’t have any complicated layout or formatting, but this bug is still present. Changing z-index in dhtmlxcalendar.css didn’t help.

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Untitled Page</title>
<link rel=“STYLESHEET” type=“text/css” href=“codebase/dhtmlxcalendar.css”>
<link rel=“STYLESHEET” type=“text/css” href=“codebase/dhtmlxcombo.css”>
<script src=“codebase/dhtmlxcommon.js”></script>
<script src=“codebase/dhtmlxcombo.js”></script>
<script src=“codebase/dhtmlxcalendar.js”></script>
</head>
<body>

<div id=“container” style=“width: 200px; height: 200px;”>
<input type=“text” id=“cal” /><br /><br />
<table>
<tr>
<td>Addd: </td><td><select id=“sel” style=“width: 200px;” ></select></td>
</tr>
</table>
</div>

<script language=“javascript”>
window.dhx_globalImgPath=“codebase/imgs/”;
var calendar = new dhtmlxCalendarObject(‘cal’, true);
var client_combo = dhtmlXComboFromSelect(‘sel’);
client_combo.clearAll();
client_combo.addOption(‘test’,‘test’);
client_combo.addOption(‘sint’,‘sint’);
</script>

</body>
</html>

Please be sure that image folders contains all necessary images from original package.
Calendar uses image as background ( described in dhtmlxgrid.css ) and if file missed ( or location of image folder relative to css file change ) - it will be shown without bg, which may look as combo overlapping calendar.





1205506153.zip (33.2 KB)