Description
Describe the bug
When using b-form-datepicker
, where the modal window opens up above the bar (depends on scroll position), the modal keep changing height depending on the date.
The result is if the user starts at a certain year and want to go back more than a few years by repeatedly clicking the double-left-arrow icon, he will have to keep moving the cursor position.
Steps to reproduce the bug
- Go to https://bootstrap-vue.org/docs/components/form-datepicker
- Make sure you don't scroll down, so the first form datepicker in the page is positioned correctly.
- Click on the form datepicker to open it.
- Position the mouse cursor above the double-left-arrow
- Click the left mouse button multiple times
- You'll see the position of it changes, which forces the operation to be a lot slower and badly designed (UX).
Expected behavior
The height should be the same, which mean the modal should always display the same amount of rows.
Versions
Libraries:
-
All is latest since you can simply see it on the documentation site
-
BootstrapVue: 2.#.#
-
Bootstrap: 4.#.#
-
Vue: 2.#.#
Environment:
- Device: PC
- OS: Windows 10
- Browser: Chrome
- Version: 81.0.4044.138
Demo link
Shown above with the official documentation site
Additional context
I also have a video showing what I mean, if the explanation wasn't good enough:
fyi: I'm refreshing the page in the beginning of the video