Fix to jQuery ui calendar not appearing from or hiding behind thickbox

If you are facing an issue of jQuery ui calendar not appearing while clicked from a jQuery thickbox or if some part of the calendar hiding behind the thickbox window you need to apply a quick fix to your calendar.

Go and open the css style class file of your calendar theme. In my case i had been using ui-darkness theme and the css style class file was located at jqueryui-1.7.3/themes/ui-darkness/jquery-ui-1.7.3.custom.css. Once file is opened look for .ui-datepicker class declaration, add z-index:300; to it and save and close the file. Hard refresh your site page and the calendar should show alright now when even clicked from a thickbox modal dialog box.

Fyi, in the z-index:300;  the number 300 can be any number which is greater than the z-index of thickbox window which is around 100 i guess.

Leave a Reply