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.
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).
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
Set this in your top of your page. It will work fine:
<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
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.