Skip to main content

Search and Top Navigation

#15250 new bug ()

Opened November 14, 2017 09:23PM UTC

Last modified November 14, 2017 10:25PM UTC

DatePicker top position bug on Modal against scrolled Background (IE11/Edge)

Reported by: claytonrumley Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

I reported this bug with the Bootstrap people here, but they told me that it belonged with jQuery UI (even though it appeared when I upgraded from Bootstrap Beta to Bootstrap Beta-2).

We are using Windows workstations. This issue affects Internet Explorer 11 and Microsoft Edge.

The problem is that when you pop up a modal containing a jQueryUI DatePicker and the background is scrolled, the datepicker is displayed offset vertically by the amount of the vertical scroll of the page.

In Bootstrap Beta-1 this problem only existed in Internet Explorer 11. After Beta-2 came out the problem now occurs in Microsoft Edge as well. FireFox and Chrome appear to be functioning properly in both versions. The version of jQuery UI we're using (1.12.1) remained the same between the two versions of BS4.

There is a previous ticket for jQueryUI made 4 years detailing this exact problem: https://bugs.jqueryui.com/ticket/9940 but it was closed because the original author didn't respond with an example of the issue.

Here is a pen illustrating the issue: https://codepen.io/anon/pen/dZzpwj

The button at the top will show the desired behaviour (as you won't have scrolled the page yet), and the button at the button will show the undesired behaviour. You may have to adjust your browser size in order to get a vertical scrollbar to appear. Note that this problem **only appears with Internet Explorer 11 and Microsoft Edge**.

Please let me know if you require any further clarification.

Thank you for your time,

Clayton

Attachments (0)
Change History (2)

Changed November 14, 2017 09:24PM UTC by claytonrumley comment:1

description: I reported this bug with the Bootstrap people [https://github.com/twbs/bootstrap/issues/24773 here], but they told me that it belonged with jQuery UI (even though it appeared when I upgraded from Bootstrap Beta to Bootstrap-2). \ \ We are using Windows workstations. This issue affects Internet Explorer 11 and Microsoft Edge. \ \ The problem is that when you pop up a modal containing a jQueryUI DatePicker and the background is scrolled, the datepicker is displayed offset vertically by the amount of the vertical scroll of the page. \ \ In Bootstrap Beta-1 this problem only existed in Internet Explorer 11. After Beta-2 came out the problem now occurs in Microsoft Edge as well. FireFox and Chrome appear to be functioning properly in both versions. The version of jQuery UI we're using (1.12.1) remained the same between the two versions of BS4. \ \ There is a previous ticket for jQueryUI made 4 years detailing this exact problem: [https://bugs.jqueryui.com/ticket/9940] but it was closed because the original author didn't respond with an example of the issue. \ \ Here is a pen illustrating the issue: [https://codepen.io/anon/pen/dZzpwj] \ \ The button at the top will show the desired behaviour (as you won't have scrolled the page yet), and the button at the button will show the undesired behaviour. You may have to adjust your browser size in order to get a vertical scrollbar to appear. Note that this problem **only appears with Internet Explorer 11 and Microsoft Edge**. \ \ Please let me know if you require any further clarification. \ \ Thank you for your time, \ \ ClaytonI reported this bug with the Bootstrap people [https://github.com/twbs/bootstrap/issues/24773 here], but they told me that it belonged with jQuery UI (even though it appeared when I upgraded from Bootstrap Beta to Bootstrap Beta-2). \ \ We are using Windows workstations. This issue affects Internet Explorer 11 and Microsoft Edge. \ \ The problem is that when you pop up a modal containing a jQueryUI DatePicker and the background is scrolled, the datepicker is displayed offset vertically by the amount of the vertical scroll of the page. \ \ In Bootstrap Beta-1 this problem only existed in Internet Explorer 11. After Beta-2 came out the problem now occurs in Microsoft Edge as well. FireFox and Chrome appear to be functioning properly in both versions. The version of jQuery UI we're using (1.12.1) remained the same between the two versions of BS4. \ \ There is a previous ticket for jQueryUI made 4 years detailing this exact problem: [https://bugs.jqueryui.com/ticket/9940] but it was closed because the original author didn't respond with an example of the issue. \ \ Here is a pen illustrating the issue: [https://codepen.io/anon/pen/dZzpwj] \ \ The button at the top will show the desired behaviour (as you won't have scrolled the page yet), and the button at the button will show the undesired behaviour. You may have to adjust your browser size in order to get a vertical scrollbar to appear. Note that this problem **only appears with Internet Explorer 11 and Microsoft Edge**. \ \ Please let me know if you require any further clarification. \ \ Thank you for your time, \ \ Clayton

Changed November 14, 2017 09:28PM UTC by rjollos comment:2

_comment0: Note: this may be similar to this ticket (which I found after posting mine): [https://bugs.jqueryui.com/ticket/14980]1510698345062538

Note: this may be similar to this ticket (which I found after posting mine): #14980.