Adaptive Width
In some cases, we need to make the floating element and the reference element above it have the same width, which can be achieved using CSS or JS.
Adaptive width using CSS
To achieve adaptive width using CSS, we can add the following settings:
First add as="div"
and class="relative"
to the <Float>
component, render the periphery as <div class="relative">
, and then add floating-as="template
let no elements be rendered around the floating element (the default will render a layer of <div>
elements), directly position the floating element, and finally add the w-full
class to the reference element and the floating element and you are done.
Now the button and options will have the same width:
<Listbox>
<Float
as="div"
class="relative"
placement="bottom"
:offset="4"
floating-as="template"
>
<ListboxButton class="w-full ...">
...
</ListboxButton>
<ListboxOptions class="w-full ...">
...
</ListboxOptions>
</Float>
</Listbox>
Of course, you can also specify the width directly:
<Listbox>
<Float
...
class="relative w-[260px]"
...
>
...
</Float>
</Listbox>
If you put it in a flex
container to fill the width, you need to add the w-full
class:
<div class="flex justify-center items-center">
<Listbox>
<Float
...
class="relative w-full"
...
>
...
</Float>
</Listbox>
</div>
Adaptive width using JS v0.10+
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 adaptive-width
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.
<Float adaptive-width>