Trouble with jQuery Dialog and Datepicker plugins

Question

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.

Answer 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).

Answer 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.

Answer 3

This worked for me:

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

Answer 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.

Answer 5

As of UI version 1.7.2 ui-datepicker-div is no longer a valid css element. "ui-datepicker" seems to be the outmost wrapper and setting the z-index to 99999 is working correctly for me as far as I know

Answer 6

for jquery-ui-1.7.2

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

Answer 7

Set this in your top of your page. It will work fine:

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

Answer 8

I got it working by calling

$("#ui-datepicker-div").css("z-index", "1003" );

Answer 9

I'm shocked that:

a) no one here has mentioned a programmatic solution to setting the datepicker z-Index b) there is no option for the jQuery DatePicker to pass a z-Index when binding it to an element.

I am using a js method to calculate the highest index. We default to checking only divs, because these are the likely elements to get a z-index value and is understandably quicker than parsing every element on the page.

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

Because we have to use javascript to bind the datepicker to an element, i.e. $('#some_element').datepicker(), at that time we set the target element's style so that datepicker will pick up the z-index from it. Thanks to Ronye Vernaes (in his answer on this page) for pointing out that datepicker() will pick up the target element's z-Index if it has one and is set to position: relative:

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

this.target is the input element we are making into a datepicker field. At binding time, we get the highest z-index on the page and make the element's z-index one higher. When datepicker icon is clicked, it will pick up that z-index from the input element, because, as Ronye Vernaes mentioned, of the style position: relative.

In this solution, we don't try and guess what the highest z-Index value is going to be. We actually GET IT.

Answer 10

The dialog is rendered in an iframe, and is rendered on top of everything else (including dropdowns). Meanwhile the datepicker is rendered in normal HTML and positioned absolutely.

It sounds like the datepicker is being rendered absolutely relative to the parent page instead of the iframe. Have you tried placing the calendar inside the dialog as just a standard, non-absolute-positioned blog? Or you could use dropdowns instead.

Answer 11

Solution to jquery datepicker 1.8.3 version, to change z-index value, it is not impossible to change via css.

This one works fine:

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });

Answer 12

The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post

To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100

<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }

You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.

<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }