bug: Advanced Select Component Fails to Render as Overlay, Alters Parent Container Dimensions

[mateors]

What version of FlyonUI are you using?

2.4.0

Which browsers are you seeing the problem on?

Edge

Reproduction URL

https://flyonui.com/docs/advanced-forms/advanced-select/

Describe your issue

Please take a close look at the two images below.

The first image correctly displays the optgroup element as expected.

However, the second image clearly shows that when the dropdown is clicked, it expands and unexpectedly alters the height of the parent container.

This behavior is problematic—it should not affect the layout or positioning of surrounding elements. Ideally, the dropdown should behave like an absolutely positioned overlay, rendering independently without impacting the parent container or adjacent components.

I’ll share a few more related issues shortly.

[github-actions]

Hi @mateors

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[PruthviPraj00]

Hello @mateors,

That’s why there is the --scope option available. If you don't want the advance select to open in a modal container. and or you can give a height to the modal container.

https://flyonui.com/docs/advanced-forms/advanced-select/#modal-example-with-overflowhidden

[PruthviPraj00]

We appreciate your support in reporting any bugs or issues you find. Thank you for helping us improve FlyonUI for our users.

[mateors]

@PruthviPraj00 Yes now it works! Thank you for your quick response.