datepicker z-index

my datepicker appears behind the menu navbar when the browser window is small.

i tried editing the relevant jquery-ui.css by adding

.ui-datepicker
{
 z-index: 1000;
}

but it doesn't have any effect

When dealing with z-index, you need to also specify a position:
.ui-datepicker
{
position: relative;
z-index: 1000;
}

If that does not work, can you send a link where i can see the problem to trouble shoot.

HI Jason.

Here is a screenshot example, and here is a link to the page...

event_insert.php

thanks

the j-query javascript is dynamicly resetting the z-index to 1 and the position to absolute.

when figuring the z-index stacking order, each position type has its own layer.

the relative layer is always below the absolute layer.

in the CSSMenuWriter/cssmw/menu.css file, change the position:
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}

from relative to static so that the menu layer will be above the absolute layer.

ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: static;
white-space: nowrap;
z-index: 100;
}

thanks jason, that sorted it.

No worries.

oops, not quite sorted.

I noticed that the proposed fix, in setting the ul#cssmw li attribute from relative to static causes another issue.

With this in place, the submenus no longer work, and when you mouseover the nav bar, instead of the submenu, a scrollbar appears on the right

Alternatively

...Could an alternative 'solution' be to change the position of the datepicker relative to the text field being edited ?

By default it seems to appear below the field. If the field is near the bottom of the page, the datepicker appears above.
Is it possible to force it to the side ?

After a bit of fiddling, I still haven't worked this out.

Other than moving the field down the page, i don't know what else to try.

Any input appreciated

you can change the positioning of the date picker by adding this to the javascript code:

beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px',
		    zIndex: '1000'
            });

so the default datepicker code block will look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

this is an example of the beforeShow code added to it:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1,
		beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px',
                    zIndex: '1000'
            });
    }
	});
});

it may fix the issue to just include the zIndex: '1000' in the beforeShow

hi Jason,

i tried that, and still no joy.

looking in firebug, the datepicker still has a zindex of 1 and position absolute.

page attached, if it helps