search

melohagan / budibase-component-kasper-date-picker

Date picker with text input with options to set format, locale, show/hide calendar. Adapted from the Kasper date picker.
11 stars 6 forks source link

Calendar not showing at the right place on scrollable view #10

Closed lolcabanon closed 1 year ago

lolcabanon commented 1 year ago

Current Behavior:

Calendar not showing at the right place on scrollable view when input focused, even if "Show calendar" option is checked. (I think it might be showing in the original coordinates of the input before scroll)

Expected Behavior:

Calendar would show just below input when it gets focus.

Steps To Reproduce:

  1. Add plugin trough Budibase admin with GitHub link.
  2. Create new app
  3. Add many components (empty Container is enough just for test) so the view is more than 100vh
  4. Add kasper-date-picker below other content
  5. Add more content below to expand scroll (optional)
  6. Preview app
  7. Scroll (the more you scroll, the further the calendar gets down until it is not even visible on page)
  8. Focus input

Here is a demo app that can reproduce : kasper date picker GitHub Issue demo-export-1678144600571.tar.gz

Environment:

Anything else:

Happy to help troubleshoot if I can do anything!

lolcabanon commented 1 year ago

Fixed by adding position: absolute for .picker.visible in DateInput.svelte :

.picker
    ...
    &.visible
      display: block
      position: absolute    <==

I won't do a pull request just for that, but just so you know.

I have not tested all possible cases, but it solved all my issues so good enough for me!