search

aboveyunhai / chakra-dayzed-datepicker

Chakra UI + Dayzed = datepicker
https://aboveyunhai.github.io/chakra-dayzed-datepicker/
MIT License
225 stars 48 forks source link

change positioning of calendar panels #65

Closed elizabethboterf closed 6 months ago

elizabethboterf commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 11 months ago

@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 commented 11 months ago

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

datepicker