Opened 7 years ago

Last modified 17 months ago

#8223 open bug

Datepicker: position remains fixed on scrolling

Reported by: sonalisabnam Owned by: sonalisabnam
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

Description

I have a jquery datepicker in my application. On scrolling the calander ui position remains fixed on the screen.

Change History (12)

comment:1 Changed 7 years ago by Scott González

Component: ui.coreui.datepicker
Owner: set to sonalisabnam
Status: newpending

Please provide a reduced test case showing the problem.

comment:2 Changed 7 years ago by jz10

Since OP is apparently MIA, I will provide the test case in his place.

Place the datepicker control inside a scrollable div. The datepicker stays in place when div is scrolled.

Happens because the datepicker container is appended out in the body tag and not inside the parent div.

Quickfix: Append the container inside the parent div and play around with vertical positioning until you get it right.

comment:3 Changed 7 years ago by Scott González

Status: pendingopen

comment:4 Changed 7 years ago by Scott González

#8367 is a duplicate of this ticket.

comment:5 in reply to:  description Changed 7 years ago by roosteronacid

Test-cases and browser-tests

jsFiddle: http://jsfiddle.net/jbK6a/3/

OSX Lion: Latest versions of Mozilla FireFox, Google Chrome and Safari

Windows 7: Latest versions of Mozilla FireFox, Google Chrome and Internet Explorer 9 (including emulated IE8 mode)

Windows Vista: Internet Explorer 7

Last edited 7 years ago by roosteronacid (previous) (diff)

comment:6 Changed 7 years ago by Scott González

Milestone: 1.9.01.11.0

comment:7 Changed 7 years ago by tj.vantoll

Summary: jquery datepicker UI position remains fixed on scrollingDatepicker: position remains fixed on scrolling

Still an issue in master, reduced test case - http://jsfiddle.net/tj_vantoll/QUFzw/.

comment:8 Changed 5 years ago by peter.fu

Please also take the condition when parent container is a fixed DIV into consideration when fixing this one.

comment:9 Changed 5 years ago by Scott González

Milestone: 1.11.0none

comment:10 Changed 5 years ago by Scott González

See also #10082

comment:11 Changed 3 years ago by Arlen Johnson

While a fix for this ticket is forthcoming, I post this simple solution (tested in jQuery UI 1.11.4) for those looking for a quick fix.

You can add a .bind() event to the end of the datepicker instantiation:

$("first-selector").datepicker().bind('click',function () {
  $("#ui-datepicker-div").appendTo("other-selector");
});

For example, the "other-selector" could be the parent of the "first-selector": $(this).closest('first-selector-parent'). This picks up the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) and moves it to a location somewhere else within the document. This can be used for multiple instantiations on a single page.

The "other-selector" should have position: relative; so that the absolutely positioned #ui-datepicker-div becomes positioned relative to the new parent. Once so, it scrolls just fine.

This solution allows the datepicker to work correctly on mobile devices where it can be hard to use if rendered partially off screen.

Last edited 3 years ago by Arlen Johnson (previous) (diff)

comment:12 Changed 17 months ago by Alexander M

Do you guys have en estimation for when this issue will be fixed? This can be still reproduced in version 1.12.1

Note: See TracTickets for help on using tickets.