Skip to main content

Search and Top Navigation

#8223 open bug ()

Opened March 28, 2012 05:14AM UTC

Last modified February 27, 2018 08:56AM UTC

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.

Attachments (0)
Change History (12)

Changed March 28, 2012 12:25PM UTC by scottgonzalez comment:1

component: ui.coreui.datepicker
owner: → sonalisabnam
status: newpending

Please provide a reduced test case showing the problem.

Changed April 12, 2012 06:49AM UTC by jz10 comment:2

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.

Changed April 15, 2012 03:58PM UTC by scottgonzalez comment:3

status: pendingopen

Changed May 30, 2012 01:58PM UTC by scottgonzalez comment:4

#8367 is a duplicate of this ticket.

Changed May 30, 2012 02:26PM UTC by roosteronacid comment:5

_comment0: Replying to [ticket:8223 sonalisabnam]: \ > I have a jquery datepicker in my application. On scrolling the calander ui position remains fixed on the screen. \ \ 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 71338388033508288

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

Changed October 11, 2012 02:45PM UTC by scottgonzalez comment:6

milestone: 1.9.01.11.0

Changed December 06, 2012 09:18PM UTC by tj.vantoll comment:7

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/.

Changed January 24, 2014 09:01AM UTC by peter.fu comment:8

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

Changed June 24, 2014 11:14PM UTC by scottgonzalez comment:9

milestone: 1.11.0none

Changed July 14, 2014 06:34PM UTC by scottgonzalez comment:10

See also #10082

Changed October 30, 2016 04:48PM UTC by spartanicus comment:11

_comment0: While a fix for this ticket is forthcoming, I post this simple solution (as of 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. \ \ 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 and tablets where it can be hard to use if rendered partially off screen. \ 1477846115840101
_comment1: 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. \ \ 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 and tablets where it can be hard to use if rendered partially off screen. \ 1477846206414660
_comment2: 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 and tablets where it can be hard to use if rendered partially off screen. \ 1477849435491190

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.

Changed February 27, 2018 08:56AM UTC by dafo comment:12

Do you guys have en estimation for when this issue will be fixed?

This can be still reproduced in version 1.12.1