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.

Wurster

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

Exudation

I change the zIndex property of dialog equals 1, and use this code included per you. This post resolve my problem. Thanks. – Wurster

Just to update this answer, it now needs to be z-index:1002. The JQuery Dialog uses an inline style: style="overflow: hidden; display: block; position: absolute; z-index: 1001; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px; height: auto; width: 350px; top: 309.5px; left: 413.5px;" – Kashgar

After a few more minutes exploration, the jQuery Dialog seems to increase its z-index each time. I'm not sure if that is a bug or not, but setting the #ui-datepicker-div z-index to 9999 fixes it. – Kashgar

It's always good to add a position as well, relative will normally do the job – Quesenberry

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.

Arnettearney

I was trying a different approach that did not work. Jonatan's solution is so simple that's perfect! Here is the code I was working on before I found this CSS solution. – Mt

$('#ui-datepicker-div').css("z-index","1000"); – Mt

Answer 3

This worked for me:

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

Lear

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.

Staples

I really think this is the best approach, because it opens up the possibility to set the zIndex dynamically. See my other full answer on this page. – Sidell

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

Tem

Answer 6

for jquery-ui-1.7.2

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

Comeback

Answer 7

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

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

Patino

the !importance flag is necessary to override the inline styling – Ectogenous

Answer 8

I got it working by calling

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

Kamchatka

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.

Sidell

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.

Brit

Depends which dialog he is using (question doesn't say). The one we use does not use an iframe, but I can believe there are others which do. – Exudation

The dialog that I use, is a plugin of jQuery UI for version 1.3.2 of jQuery library. – Wurster

Yeah I assumed jQuery UI, which does use the iframe – Brit

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)
    });

Reduce

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; }

Defile