wojtekmaj/react-daterange-picker

Calendar menu being cutoff

lanceschi opened this issue · 7 comments

lanceschi commented

Hello @wojtekmaj,

and thanks for the awesome component. I'd like to have some advice on how to deal with component positioning.

If I set <DateRangePicker /> positiong: relative the calendar menu is going to be cut off. Please consider that I set overflow-x: auto in the parent div. Here's a sample picture:
01

If instead I set <DateRangePicker /> positiong: absolute the calendar menu is going to positioned correctly above all the other DOM elements but sadly the input won't move while scrolling with the mouse. Here's another sample picture:
02

Any help appreciated. Thanks

github-actions commented

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

github-actions commented

This issue was closed because it has been stalled for 14 days with no activity.

wojtekmaj commented

I don't think there's an easy way to get around that. Your best options are:

  • Set overflow-x: visible when calendar is opened
  • Build a mechanism that moves fixed DateRangePicker as you scroll the page
lanceschi commented

Hello @wojtekmaj,

and thanks for the reply, I successfully used React Portal in the past in order to easily overcome these HTML element position shortcomings.

Please consider this solid React feature as a possible candidate solution in the future.

wojtekmaj commented

Just a heads up: in ce9385c, support for portalContainer prop was added, which makes it possible to render Calendar using a Portal.

  • 🚀1
Deleted user commented

Hello @wojtekmaj could you please make a tagged realease for this feature? thanks in advance.

  • 👍2
blkdr commented

Hello @wojtekmaj

Im trying to use the portalContainer prop as listed on the available props for v3.4.0 but is not working, after further inspection it appears that is listed but it did not went live on the dist build.

Can you help? Greetings