Trouble with jQuery Dialog and Datepicker plugins

I have a dialog, and I have a datepicker field on the dialog.

When I open the dialog and click in the datepicker field, the datepicker panel show behind dialog.

I try more properties: zindex, stack, bgiframe, but not success.

Someone can help me?

Tks.

Solution 1:

Old Answer

z-index (note the hyphen!) is the property that matters. Make sure you set it greater than the dialogue, and make sure you set it on the correct element. Here's how we do it:

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

API Change - April 17, 2010

In the CSS file for the date picker, find the .ui-datepicker item and change it:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

Using z-index: 9999 !important; worked in Firefox 3.5.9 (Kubuntu).

Solution 2:

for jquery-ui-1.8

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

The important is needed since the datepicker has an element.style which sets z-index to 1.

Solution 3:

This worked for me:

.ui-datepicker {
        z-index: 9999 !important;
    }

Solution 4:

Put the following style at the 'input' text element: "position: relative; z-index: 100000;".

The datepicker div takes the z-index from the input, but this works only if the position is relative.

Using this way you don't have to modify any javascript from jQuery UI.