Side navigation
#1904 closed bug (fixed)
Opened November 08, 2007 01:06PM UTC
Closed November 15, 2007 02:00AM UTC
Last modified March 15, 2012 12:40AM UTC
Calendar doesn't position well when used in position:fixed elements
Reported by: | johngeek | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.2.2 |
Component: | ui | Version: | 1.2.1 |
Keywords: | calendar position fixed | Cc: | |
Blocked by: | Blocking: |
Description
When attaching a calendar to an input placed inside a div whose position is set to "fixed", the popup calendar doesn't show up in the right position.
The problem is that the calendar use the input's offset (relative to the viewport's top left corner) to compute its position while it should use an offset relative to the document's top left corner.
Workaround:
check whether a parent of the target input field has its position set to 'fixed'. If it is the case, then set the popup position to 'fixed' instead of 'absolute'
Quick fix for ui.calendar:
in the showFor method, line 313, replace
if (!popUpCal._pos) { // position below input popUpCal._pos = popUpCal._findPos(input); popUpCal._pos[1] += input.offsetHeight; } inst._calendarDiv.css('position', (popUpCal._inDialog && $.blockUI ? 'static' : 'absolute')). css('left', popUpCal._pos[0] + 'px').css('top', popUpCal._pos[1] + 'px');
By
if (!popUpCal._pos) { // position below input popUpCal._pos = popUpCal._findPos(input); popUpCal._pos[1] += input.offsetHeight; // Check whether the input is not inside a position:fixed div popUpCal._fixed = false $(input).parents().each(function() {popUpCal._fixed |= $(this).css('position') == 'fixed'}); } inst._calendarDiv.css('position', (popUpCal._inDialog && $.blockUI ? 'static' : (popUpCal._fixed ? 'fixed' : 'absolute'))). css('left', popUpCal._pos[0] + 'px').css('top', popUpCal._pos[1] + 'px');
Attachments (0)
Change History (1)
Changed November 15, 2007 02:00AM UTC by comment:1
resolution: | → fixed |
---|---|
status: | new → closed |
The offset method now supports fixed position elements. This should be resolved using the latest svn of jQuery.