Ticket #11871 (closed bug: invalid)
datepicker zIndex
| Reported by: | dragoljub | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I am using datepicker 1.8.18 and have found a bug with zIndex property for calendar. Example:
<body> <div style="position: fixed; height: 200px; z-index: 5;"></div> <div style="position: absolute;> <div style="margin-top: 200px; z-index: 2;"> <table><tr><td><input id="datepicker" type="text" /></td></tr></table></div></div> </body>
in some cases when calendar is shown top of calendar is invisible / inaccessible because of fixed div on top with z-index = 5, and calendar z-index = 1 but it should be at least 6.
I have fixed this bug by replaceing inst.dpDiv.zIndex($(input).zIndex() + 1);
line with:
var zIndex = 1;
var ancestorsZIndexes = $(this).parents().map(
function () {
var zIndex = $(this).css("z-index");
return isNaN(zIndex) ? 0 : zIndex;
}).get();
var parentZIndex = Math.max.apply(Math, ancestorsZIndexes);
if (parentZIndex >= 0) zIndex = parentZIndex + 1;
inst.dpDiv.zIndex(zIndex);
hope you will use this solution for other widgets too.
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
http://bugs.jqueryui.com/