Dhtmlx Calendar z-index issue


I am using dhtmlX calendar however the calendar window pop-ups behind the controls on the form. I have tried using z-index: 999 however no success.

Moreover, I saw the below given link which is on the same kind of issue but not sure how to use the solution provided at the last.

dhtmlx.com/docs/products/kb/ … 16&q=11876

Can you please help me out in this?




which skin do you use ?

For example if you use yahoolike skin, z-index should be increased in the following class:

.dhtmlxcalendar_yahoolike {


If the issue can not be solved, please provide the sample where the problem can be recreated

I am using “simplecolorsand” as skin and also used z-index: 999 but still my calendar comes behind the controls on the form.


For your reference I have attached two screenshots, State_1 is one in which calendar is closed, State_2 is one in which calendar is open and showing behind the controls


Please suggest

Calendar States.zip (7.77 KB)

Do you use disableIESelectFix ? By default the IE select fix is enabled. But this method disables it and the issue can take place.
If you don’t use this method, please provide complete demo (sample) that allows to recreate the issue, and information about browser.

Please see the demo code for your reference, hope now you would be able to recreate the problem and would suggest me something on this.


Calendar_Demo.zip (69.6 KB)

I am using IE-6


could you  please provide demo that doesn’t require any server-side.

Here you go…!
Calendar_Client.zip (49.7 KB)

Please, try to use cal1.show() instead of document.getElementById(‘calendar1’).style.display = ‘’ to display calendar. In this case the problem will be solved.

To hide calendar - hide() method:


Althought it has helped me to bring calendar popup up-front however, a white box is coming with the popup.

Any suggestion on that?


the white box is the IE6 fix - iframe that allows to show container over the select.

So, there is no way to avoid this box.

It’s possible to descrease the size of the iframe - it will be fully hidden by calendar. But in this case a part of the select will overlap the part of the calendar (part without iframe).