Search and Top Navigation
#4363 closed bug (fixed)
Opened March 18, 2009 10:22PM UTC
Closed January 29, 2010 09:35PM UTC
Last modified February 01, 2012 04:35PM UTC
Datepicker Month/Year Dropdowns Not Working In Safari In A Dialog
| Reported by: | btburnett3 | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8 |
| Component: | ui.datepicker | Version: | 1.7 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you are using month or year change drop downs, and the datepicker is placed inside a dialog, clicking on the drop downs in Safari 3 has no effect. Not sure if it's not displaying the drop down, or if it is somehow hidden due to a z-index issue. In order to get the datepicker to work with dialogs, I set ''.ui-datepicker {z-index: 10000)'' in my CSS file.
Attachments (1)
Change History (8)
Changed April 06, 2009 01:29PM UTC by comment:1
Changed April 15, 2009 02:29AM UTC by comment:2
It isn't related to that, I've already corrected this by applying a z-index to my datepicker
to bring it to the foreground.
I tracked down the problem, it is related to the overlay of a modal
dialog box. The overlay traps all bubbled mouse events and cancels them if they are not from a child
of the dialog. Since the datepicker's DIV is outside the dialog, all events are cancelled. This
doesn't affect any of the controls normally. However, the SELECT control is paying attention to this
cancel in Safari only.
I worked around it temporarily on my site by adding an additional filter to the overlay event in the ui.dialog.js file, but this isn't a very elegant solution to the problem.
Changed April 17, 2009 03:04AM UTC by comment:3
| milestone: | TBD → 1.8 |
|---|
Changed October 27, 2009 10:47PM UTC by comment:4
I have also reproduced this issue while testing one of my applications. This occurs in webkit browsers only (Safari and Chrome).
Changed October 28, 2009 12:09AM UTC by comment:5
FYI, I made the following change to work around this issue at approximately line 537 in ui.dialog.js (1.7.1):
from:
var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
to:
var dialogZ = $(event.target).parents('.ui-dialog,.ui-datepicker').css('zIndex') || 0;
This solution is not ideal though. I wish you could just check on the zIndex of event.target, but that doesn't seem to work, probably because zIndex only applies to absolutely positioned elements.
Changed December 23, 2009 01:53PM UTC by comment:6
This may be a great candidate for using the new .zIndex() method.
Changed January 29, 2010 09:35PM UTC by comment:7
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Fixed in r3757 by Brant.
Changed February 01, 2012 04:35PM UTC by comment:8
I believe this issue has returned.
We are using a JQGrid with a datepicker in the add\\edit modal dialog. Clicking on the month or year column has no effect in Chrome, and sometimes works in IE9. Firefox 3.6 has no issues and have not tested on a later version of Firefox. Based on a web search others appear to be having this issue as well:
Is this possibly related to ticket #4338, "DatePicker shown under Dialog box", which was marked as don't fix?