livewire / livewire/flux

Date picker stays below with a few pixels of scroll instead of flipping when it's just short of room

Open
#2,833 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Blade
Stars
977
Forks
112
Avg merge
1d 4h
Merged PRs (30d)
21

Description

### Flux version

v2.20.0 (flux and flux-pro)

### Livewire version

v4.4.4

### Tailwind version

v4.3.3

### Browser and Operating System

Chrome on macOS

### What is the problem?

When a date picker opens below its trigger with a few pixels too little room, it stays below instead of flipping above. It gets an inline `max-height` a few pixels shorter than the calendar, so the calendar shows a scrollbar with a few pixels of scroll. With a little less room it flips above as expected, with no scrollbar.

It looks like the middleware in `anchor()` (`js/mixins/anchorable.js`) disagrees by 5px: `flip()` runs with no padding, while `shift()` and `size()` use `padding: 5`. So `flip()` decides the calendar fits below, and `size()` then caps its height to keep 5px from the viewport edge.

A second effect: the capped `max-height` stays on the dialog after it closes. The next open seems to measure the capped height, so reopening a few pixels lower keeps it below with more scroll instead of flipping.

Measured with `` on a 1280px wide window. The calendar is 330px tall and its trigger's bottom edge is 432px from the top of the viewport, so the calendar's bottom edge lands at 767px:

| Window height | Fresh page, calendar opened once |
|---|---|
| 771px and taller | Below, no scroll |
| 770px | Below, `max-height: 328px`, 2px of scroll |
| 769px | Below, `max-height: 327px`, 3px of scroll |
| 768px | Below, `max-height: 326px`, 4px of scroll |
| 767px | Below, `max-height: 325px`, 5px of scroll |
| 766px and shorter | Flips above, no scroll |

Opened at 768px (`max-height: 326px`), closed, window shortened to 765px, opened again: below, `max-height: 323px`, 7px of scroll. A fresh page at 765px flips above.

Resizing the window while the calendar is open doesn't reproduce it: it only appears when the calendar opens at that height.

The same `anchor()` code positions Flux's other popovers, so they may hit this too. I only measured the date picker.

### Code snippets to replicate the problem

```blade




```

1. Open the page in Chrome at a desktop width.
2. Open the calendar and note where its bottom edge lands, measured from the top of the viewport.
3. Close it, and set the window height to that bottom edge, or up to 3px more. DevTools' device toolbar makes this exact.
4. Reload the page and open the calendar. It stays below the trigger, a few pixels short, with a scrollbar.
5. At 1px less than the bottom edge it flips above; at 4px more it fits. Neither scrolls.

### Screenshots/ screen recordings of the problem

Image

Window 1280 × 768. The scrollbar colour is set in CSS so it shows in the screenshot.

### How do you expect it to work?

The calendar should either fit below or flip above, never stay below with a few pixels of scroll.

Two changes look like they would do it, though I haven't tested either against your source: give `flip()` the same padding as `size()` (for example `flip({ padding: 5 })`), and clear the inline `max-height` before measuring, so a previous cap doesn't affect the next open.

### Please confirm (incomplete submissions will not be addressed)

- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in js/mixins/anchorable.js and reproduce the date-picker behavior using the supplied Blade snippet and viewport heights. Check the anchor middleware during opening and reopening; done means the calendar either fits below or flips above without a short scrollbar or a stale inline max-height.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, tailwindcss
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.