Skip to content

[Bug/Design Bug] b-form-datepicker keep changing height when positioned above #5326

Closed
@matanshukry

Description

@matanshukry

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

  1. Go to https://bootstrap-vue.org/docs/components/form-datepicker
  2. Make sure you don't scroll down, so the first form datepicker in the page is positioned correctly.
  3. Click on the form datepicker to open it.
  4. Position the mouse cursor above the double-left-arrow
  5. Click the left mouse button multiple times
  6. 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:

https://streamable.com/5h0dhf

fyi: I'm refreshing the page in the beginning of the video

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions