Skip to content
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.

Sign up for GitHub

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

Jump to bottom

change positioning of calendar panels #65

Closed
elizabethboterf opened this issue Sep 13, 2023 · 4 comments · Fixed by #73
Closed

change positioning of calendar panels #65

elizabethboterf opened this issue Sep 13, 2023 · 4 comments · Fixed by #73

Comments

@elizabethboterf
Copy link

elizabethboterf commented Sep 13, 2023 •
edited

Hi!

I am using your RandeDatePicker in a component on the right side of my page. The calendar panels overflow off screen and the user can not select dates from the second panel. I have tried changing the zIndex and the placement props with
propsConfigs={{
popoverCompProps:{
popoverContentProps: {
placement: 'left-start',
zIndex: 300
}
}
}}

I also tried this with popoverBodyProps which also did not work. If we can't change the placement, Is there a way to change the behavior of the overflow? Maybe switch to a column instead of a row? Or is there a way to do a RangeDatePicker with just one calendar panel?

Appreciate the help, thanks!
@aboveyunhai
Copy link
Owner

@elizabethboterf it's hard to understand how it looks like without a video. The best way you can do is to create a codesandbox demo to replicate the issue, The problem could be upstream issue from Chakra UI without knowing at the code.

@elizabethboterf
Copy link
Author

Ok, I recreated the problem on this code sandbox.

https://codesandbox.io/p/sandbox/loginplay-forked-v42yn3?file=%2Fsrc%2FChakraDatePicker.js

I think the main issue is with the controller.
Do you know of a work around while still using the controller?

@aboveyunhai
Copy link
Owner

aboveyunhai commented Oct 24, 2023 •
edited

@elizabethboterf
does usePortal={true} fix your issue? The overflow style of container cuts off the component. So you need a portal to bring it up to the <body />.

@FarhanAbdulQayyum
Copy link

@aboveyunhai
Yes usePortal={true} does fix the issue.
I have tested with usePortal={true} on the same sandbox.

datepicker

@aboveyunhai aboveyunhai linked a pull request Jan 22, 2024 that will close this issue
v0.3 ? #73
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

v0.3 ? aboveyunhai/chakra-dayzed-datepicker
3 participants
@FarhanAbdulQayyum @aboveyunhai @elizabethboterf