ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
348 stars 13 forks source link

Can't make Vue dropdown options stick to the Combobox width #75

Closed cxammar closed 1 year ago

cxammar commented 1 year ago

Describe the bug I'm unable to make the combobox options stick to the Combobox max width and break the overflow (float) on the parent container at the same time in Vue 3.

To Reproduce Please refer to this stackblitz https://stackblitz.com/edit/github-qtnwz4

image

image

ycs77 commented 1 year ago

You can remove the overflow-hidden class to fix this:

        <PopoverPanel
          class="absolute right-0 z-10 mt-3 flex w-screen max-w-max"
        >
          <div
            class="
              w-screen
              max-w-md
              flex-auto
-             overflow-hidden
              rounded-md
              border border-gray-300
              bg-white
              text-sm
              shadow-xl
              ring-2 ring-gray-900/5
            "
          >
            <div class="flex flex-col p-5 space-y-5">
              <OverflowableCombobox
                label="Tipo de cita"
                name="actuationTitle"
                :items="items"
              />
            </div>
          </div>
        </PopoverPanel>
cxammar commented 1 year ago

I feel so dumb! Many thanks for the quick reply