The popup datepicker positions itself behind checkboxes

[bjartekv]

The popup datepicker positions itself behind checkboxes. Seems that this should be fixable by forcing a higher z-index on the datepicker div. But maybe there is a better way already built into jquery mobile?

http://jsbin.com/uzaret/1292/edit

[indrimuska]

The label of the checkbox has z-index=2, so there's no other way to fix it. You have to change the z-index of the datepicker to 2 or the z-index of the checkbox to 1. I prefer the first solution.

[arschmitz]

There is a datepicker_getZindex function in the ui datepicker which is supposed to ensure it has the proper z-index to show above anything else on the page. For some reason its failing to properly calculate here. working on figuring out why.

[bjartekv]

Thanks for looking into it. The datepicker_getZindex function seems to work correctly though if a parent element is absolutly positioned such as in the case with a datepicker inside popup http://jsbin.com/uzaret/1298/edit.

[arschmitz]

still working on a workaround for this

[jecole]

Any updates on this? It appears to be an issue with radio buttons too. I have tried various workarounds with the z-index to no avail...Thanks!

[bjartekv]

The workaround proposed by indrimuska is the best solution I've found so far. http://jsbin.com/uzaret/1925/edit

[amarkarian]

set the z-index to a high value. in my case this solved the issue.

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

[arschmitz]

@amarkarian yes thats the best solution at the moment

[amarkarian]

hint: if you want to avoid keyboard popup on iPad, just add onfocus="this.blur();" attribute to the input like this <input data-role="date" type="text" onfocus="this.blur();" ...

@Alexander: Another topic; in some - not reproducable cases - the current year turns after clicking the < button to 1800. Any Idea?