Opened 5 years ago
Closed 5 years ago
#11871 closed bug (invalid)
datepicker zIndex
| Reported by: | dragoljub | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
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.
http://bugs.jqueryui.com/