search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.52k stars 152 forks source link

Menu is out of bounds when positioned above the input but there is insufficient space #747

Closed BryanKuiper closed 9 months ago

BryanKuiper commented 9 months ago

To Reproduce Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/vuepic-vue-datepicker-v2wkgv
  2. Adjust the size of the screen to make sure there is more space above the input than below the input
  3. Click on the input
  4. The menu opens above the menu, but is partially outside of the screen (see screenshot)

Expected behavior The menu should never go out of bounds at the top of the screen. The menu should go above the input if both are valid:

The getMenuPlacement method determines whether the menu should be placed above or below the input but goes past all the if statements and therefore defaults to MenuPlacement.top in this situation. Maybe it should default to MenuPlacement.bottom.

Screenshots image

Desktop & mobile (please complete the following information):

Jasenkoo commented 9 months ago

This is really an edge case and won't be fixed, also, this is on end application to make sure that the picker has enough space to open, if not, other props can help with it.

xak2000 commented 9 months ago

@Jasenkoo I have similar problem. By "other props" you probably meant https://vue3datepicker.com/props/positioning/#alt-position? It can solve the problem, but I didn't find any docs that describe how often (or on what events) the customPosition function is called.

My idea is to use something like https://floating-ui.com/docs/vue to calculate top/left and then use alt-position to apply the values.

But, as the values are not constant (scroll position, window size, hidden/visible other elements, etc.), I need some hook to force vue-datepicker to re-call the customPosition function. Can you point me to the right direction, please?

Edit: Found https://vue3datepicker.com/methods-and-events/methods/#onscroll method. Tried it and it re-calls the customPosition function on call. Probably this should be enough. Thank you! :)