saadeghi/daisyui

bug: V5 Dropdown mispositioning using popover API and anchorpositioning

Closed this issue · 2 comments

What version of daisyUI are you using?

5-alpha49

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

https://v5.daisyui.com/components/dropdown/

Describe your issue

image

It happens on both normal Firefox and Firefox nightly

Thank you @J4gQBqqR for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

Anchor positioning is the standard solution for dropdowns, but it's very new.
Firefox doesn't support it yet: https://caniuse.com/css-anchor-positioning
So as and incremental adaptation, we show the dropdown in the middle of screen. It works, it doesn't break the functionality, but it shows in the middle of screen like a modal.

There's a polyfill that makes it work until Firefox adds the support:
https://github.com/oddbird/css-anchor-positioning

Alternatively you can still use the other methods such as