Thanks for this fix. I update my post so that other can set it correct.

Best Regards

Tony

If you can provide more source I'd be happy to take a look. The link you provided doesn't resolve a page so I can't see what source your working with.

Here's a snipet of how I fixed it:

    <style type="text/css">
        .ui-datepicker {z-index:1200;}
    </style>

Hope that helps!

Nathan

Warning: Expected identifier for pseudo-class or pseudo-element but found ' '.  Ruleset ignored due to bad selector.
Source File: http://www.devneq.org/index.ph.....ller/index
Line: 24

When I do that...

Thx

Martin

In your head section after you load the datepicker css set

<style>

.ui-datepicker : {zIndex:1200;}

</style>

Edit:

The above code is wrong. We should as Nathan say:

<style>

.ui-datepicker {zIndex:1200;}

</style>

I'm trying to use the datepicker ui with a grid. My date picker always appears behind the modal form.   I've reviewed a number of the posts on the site that this a zIndex issue.  My question is how to fix this...

Using jquery ui version 1.7, and jqgrid version 3.4.2

1)  Set the zIndex as a parameter - I can't seem to find any docs in regards to this parameter and the following code does not work:

    }).navGrid('#hoursNav',{refresh:true,add:true,del:true,edit:false, search:false,},{},{height:280,reloadAfterSubmit:true,modal:true,onInitializeForm:function(formid){jQuery("#DATE",formid).datepicker({showOn: 'button', buttonImage: './css/artwork/calendar.gif', buttonImageOnly: true, zIndex:950})}},{reloadAfterSubmit:true});

2) Change the CSS file for ui.datepicker.

I've looked in this file and the only line that sets the zIndex is IE special case:

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

Any help in solving this problem would be greatly appreciated.

Nathan