The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
see the ugly circle covering july 6th below…
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
I've already tried
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
any help is appreciated!
Best Answer
Your JS code in the question doesn't work because jQuery resets the
style
attribute of the datepicker widget every time you call it.An easy way to override its
style
'sz-index
is with a!important
CSS rule as already mentioned in another answer. Yet another answer suggests settingposition: relative;
andz-index
on the input element itself which will be automatically copied over to the Datepicker widget.But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
Fiddle
I created a deferred function object to set the
z-index
of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).