Shift parameter does not prevent the arrow from sticking out of the container - Githubissues

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.

https://headlessui-float.vercel.app

MIT License

344 stars 11 forks source link

Shift parameter does not prevent the arrow from sticking out of the container #48

Closed VinceBT-BG closed 1 year ago

VinceBT-BG commented 1 year ago

Use Version Use version when bugs appear:

Headless UI: v1.7.5
Headless UI Float: v0.11.0
Framework: react v18.0
@floating-ui/core: v1.0.0
@floating-ui/dom: v1.0.0
Browser chrome

Describe the bug When using shift with a value > 0, the arrow sticks out of the box

To Reproduce

Go to https://stackblitz.com/edit/github-aburrl?file=src/pages/arrow.jsx
Click on Arrow options menu
Scroll to the right while the menu is open
See error

Screenshots 2023-03-13 14 24 18

Expected behavior The arrow should have a minimal left to it does not stick out from the container, depending on its size

ycs77 commented 1 year ago

@VinceBT-BG The example is fixed, thanks for the report😊

You can using arrow={5} to add 5px padding from the arrow to the float container:

<Float shift={5} placement="bottom-start" offset={12} flip arrow={5}>

Also if setting the big arrow and must be setting the big padding.