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

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?

localhost_5173_ (2)

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

About this issue

  • Original URL
  • State: open
  • Created 7 months ago
  • Comments: 15 (14 by maintainers)

Most upvoted comments

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

CleanShot 2024-04-19 at 20 56 56@2x

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

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