[Bug]: Date Picker is cut off when positioned on the right end of a page

[lucafaggianelli]

Tremor Version

3.11.1

Link to minimal reproduction

none

Steps to reproduce

1. Position a DatePicker at the right end of a page
2. make it smaller than it normally is, i.e. :`className="w-58"``
3. click on it so the calendar menu opens
4. notice that the calendar is cut off
5. an horizontal scroll bar appears in the page

What is expected?

the floating menu containing the calendar should be automatically moved to fit into the page

I would also accept an anchor option to force the menu to be anchored on the right of the input field rather than on the left

What is actually happening?

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

[rajdip-b]

@severinlandolt hey, I feel I can fix this. Should I submit a PR?

[severinlandolt]

That would be great! I just assigned you. I have to go to sleep now🤣

[rajdip-b]

That would be great! I just assigned you. I have to go to sleep now🤣

Would try to submit the PR by the time you wake up!🤣

[rajdip-b]

Hey guys, I was experimenting with the component and sort of found it difficult to fix the alignment automatically. This is so because the Calendar is being rendered in an absolute component, which makes it very tricky to use flex boxes. I however, created a flag that will dock the calendar to left/right, thereby fixing the issue.

Here is a demo

Can anyone suggest any improvements? @severinlandolt @lucafaggianelli

[severinlandolt]

I've completed some tests and its basically a feature that our underlying library (headlessui) does not offer natively.

Thank you @rajdip-b for your initial effort and suggesting a new prop. We will do some thinking around that an come back later!

[rajdip-b]

I've completed some tests and its basically a feature that our underlying library (headlessui) does not offer natively.

Thank you @rajdip-b for your initial effort and suggesting a new prop. We will do some thinking around that an come back later!

Sure!!

[lucafaggianelli]

Yep indeed I reached the same conclusion on headlessui. Though I saw you use the lib floating ui as well in tremor, which seems more suited for this task.

About the new property, maybe I would call it "anchor" or something similar to make it more flexible so it could have values like right, left, center for the horizontal alignment and top, bottom, middle for the vertical one, I see many libs using this pattern.

[rajdip-b]

Yep indeed I reached the same conclusion on headlessui. Though I saw you use the lib floating ui as well in tremor, which seems more suited for this task.

About the new property, maybe I would call it "anchor" or something similar to make it more flexible so it could have values like right, left, center for the horizontal alignment and top, bottom, middle for the vertical one, I see many libs using this pattern.

Yeah even I did notice that. Should I proceed with the implementation, see what all changes I can implement? @lucafaggianelli @severinlandolt

[severinlandolt]

Good news: https://x.com/adamwathan/status/1729274129264624056?s=20

[rajdip-b]

Good news: https://x.com/adamwathan/status/1729274129264624056?s=20

I guess this issue can be closed then?

[severinlandolt]

I will keep it open until Headless UI has been updated

[rajdip-b]

Sure!

[rlancejohnson]

Any update on this?

[severinlandolt]

Hi @rlancejohnson → still blocked! Waiting for headless ui 4.0.

[severinlandolt]

Hi @lucafaggianelli @rajdip-b @rlancejohnson! Brief update: The overflow problem still persists and it looks like that this won't be fixable soon. I will update this asap once there is a fixing headless ui release.

If you are in desperate need of a date picker with improved positioning, it's worth taking a look here: https://raw.tremor.so/docs/inputs/date-range-picker