clockpicker icon indicating copy to clipboard operation
clockpicker copied to clipboard

Picker appears off-screen

Open jarretttaylor opened this issue 5 years ago • 0 comments

There is a change in dist/bootstrap4-clockpicker.js around line 574 that doesn't appear in src/clockpicker.js. This change was introduced in this commit. The presence of a change in a distribution file and not in a source file is cause enough for concern, but the purpose of this issue is to report that the change introduced a bug (that it is was likely trying to fix).

The referenced change can cause the picker to display off-screen if the input triggering the picker is significantly lower in the document.

Scenario:

  • Document height: 2000px
  • Window height: 700px
  • popoverHeight height: approximately 330px
  • Input element location (top): approximately 1700
  • User scrolls down the page/document to access the input element.
  • User click the input element triggering the picker to show.

In the referenced code, the following calculation and manipulation is applied:

if (popoverHeight + styles.top > windowHeight) {
	styles.top = windowHeight - popoverHeight;
}

That results in the picker appearing somewhere around 370px from the top of the document (not the window) which results in it not appearing within view.

Presumably, a similar issue exists with the "width" check also included in that commit.

jarretttaylor avatar May 20 '20 21:05 jarretttaylor