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 comment:1
| component: | ui.core → ui.datepicker |
|---|---|
| owner: | → sonalisabnam |
| status: | new → pending |
Changed April 12, 2012 06:49AM UTC by 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 comment:3
| status: | pending → open |
|---|
Changed May 30, 2012 02:26PM UTC by 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 7 → 1338388033508288 |
|---|
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 comment:6
| milestone: | 1.9.0 → 1.11.0 |
|---|
Changed December 06, 2012 09:18PM UTC by comment:7
| summary: | jquery datepicker UI position remains fixed on scrolling → Datepicker: 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 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 comment:9
| milestone: | 1.11.0 → none |
|---|
Changed July 14, 2014 06:34PM UTC by comment:10
See also #10082
Changed October 30, 2016 04:48PM UTC by 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 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
Please provide a reduced test case showing the problem.