Datepicker / Datetimepicker on modal is cut off

[michael-hack]

I'm struggling with a datepicker / datetimepicker on a modal that gets cut off at the bottom of the screen.

I am currently not sure if it is a bug or if I am missing something here. I create a modal, put a card component on it, which contains a form with several input fields. If there is a datepicker there and it is too close to the bottom of the screen, the opened datepicker (dropdown) is cut off at the bottom.

Since this is an absolute positioned dropdown, the reason is clear to me. I can also change the direction / position to "is-top-left", but then I have the problem with bad screen sizes at the top of the screen.

How can I solve this? Does anyone here know a solution / workaround?

[jtommy]

Are you using append-to-body prop ?

[michael-hack]

Yes, it's set true, otherwise the datepicker dropdown is within the modal and not really usable with all the scrolling.

Is that a problem?

I reproduced it in this pen:
https://codepen.io/michael-hack/pen/gOMqrYR

[jtommy]

I don't understand what Buefy should do in this situation.. it might check the space and automatically change position but in case there isn't enough space and I don't think there is an other way

[michael-hack]

I did not look at the corresponding section in Buefy, but since it is an absolutely positioned element, would such a calculation be possible?

buefy could behave just like any desktop system when a popup is opened too close to the bottom. There the desktop manager automatically reverses the orientation or moves the popup upwards (maybe bottom = 0 or top is calculated) if there is not enough space downwards. The problem with critical screen sizes is that there is very often enough space for the picker, but not if the starting point starts at the position of the input.

For me it would also be an alternative if you can basically activate the mobile picker variant. Is there a way to do this?

[jtommy]

I might add a prop auto-position that calculates the space and internally switch to opposite position, for example is-bottom-left to is-top-left.
In alternative a new value auto to position prop but I would miss left or right alignment (maybe I might manage auto-left and auto-right with the same logic that I described below).

What do you think?

[michael-hack]

I think both ideas are very good and a significant improvement on the current behavior.

Personally, I would prefer the auto-left / auto-right variant, although I can't say which variant fits better into the Buefy scheme.

[jtommy]

Ok, i agree with you for "auto-xxx"

[minzdrav]

Hi Guys.
I have exactly same problem with datetime picker in modal.
Is there any workaround?

Maybe I can remove append-to-body and scroll to calendar on open event? But I can't find on open/on close events.
Bad idea. In some cases there is not enough space in modal for datepicker :(

[minzdrav]

Workaround:
you can set $dropdown-mobile-breakpoint to very big value. In this case all dropdowns(including date, time, datetime pickers) will be displayed in mobile mode.
Example: $dropdown-mobile-breakpoint: 40000px

[MatiasVerdier]

@jtommy You can take a look to how libraries like https://floating-ui.com/ achieve the positioning depending on the space available

Btw, this bug should be present in all the components that are implemented using the dropdown component

[jtommy]

Autocomplete already works in a similar way