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

Adaptive width using JS #27

Closed ycs77 closed 1 year ago

ycs77 commented 1 year ago

Fixed #24

There are cases where CSS relative does not properly synchronize the width of the floating element, such as when using the portal at the same time. At this point, you can use the adaptiveWidth prop, which uses the ResizeObserver API to monitor the width of the reference element and synchronize it to the floating element, but the performance will be worse than the CSS implementation.

Usage (React)

<Float adaptiveWidth>

Usage (Vue)

<Float adaptive-width>