Ticket #7170 (closed bug: notabug)

Opened 4 years ago

Last modified 4 years ago

jQueryUI datepicker displays in the wrong place when the body has a fixed width and position: relative

Reported by: dylanbeattie Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.11
Keywords: Cc:
Blocking: Blocked by:

Description

Repro code at  http://jsfiddle.net/ZfvUp/

Screenshot at  http://www.dylanbeattie.net/misc/jqueryui-datepicker.png

When the HTML BODY element has a fixed width and position: relative, jQuery UI datepicker is being drawn in the wrong place. It appears to be calculating the required position relative to the HTML element (i.e. top/left distance from the browser window), but then positioning the datepicker pop-up relative to the BODY element.

Change History

comment:1 Changed 4 years ago by rdworth

  • Status changed from new to closed
  • Resolution set to invalid

jQuery and jQuery UI do not support size and position settings on the HTML or BODY elements.

Last edited 4 years ago by rdworth (previous) (diff)

comment:2 Changed 4 years ago by Andrewiski

I had a wierd one with ie7, ie8, ie9, and FF, same thing where if datepicker was on the right side and you had scrolled down at all the datepicker would open up or right of the viewport out of view. When you tried to scroll right to see it, it would disapear. I could not figure it out for a couple of days. The issue came down the developer didn't include a <!DOCTYPE html> tag to the page. That was it. No <!DOCTYPE html> it displayed random add <!DOCTYPE html> and the issue was resolved. Chrome, and Safari displayed correctly. I tried UI 1.7.3, UI 1.8.1, and UI 1.9 all gave the same results. Hope this helps anyone else and prevents wierd bug reports from getting submitted.

Andy

comment:3 Changed 4 years ago by rdworth

A doctype ( such as <!DOCTYPE html> though there are much longer ones ) that triggers standards mode is required. Without one the browser is in quirksmode which is not supported by jQuery or jQuery UI.

Note: See TracTickets for help on using tickets.