-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Datepicker / Datetimepicker on modal is cut off #3037
Comments
Are you using |
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: |
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 |
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? |
I might add a prop What do you think? |
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. |
Ok, i agree with you for "auto-xxx" |
Workaround: |
@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 |
Autocomplete already works in a similar way |
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?
The text was updated successfully, but these errors were encountered: