Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
606 stars 26 forks source link

Flyout is clipped off by Expander #30

Open JVariance opened 2 years ago

JVariance commented 2 years ago

Before you start...

What browsers are you seeing the problem on?

Firefox, Chrome

Description

If you open a Flyout that's placed inside an Expander, it gets clipped off, because the Expander has set 'overflow: hidden'. AFAIK this problem can not be solved CSS-only, because the height of the Expander is transitioned and doesn't work with height set to auto.

My (quickly programmed) solution with JavaScript: ~https://svelte.dev/repl/833c79a8f04e497a80ed52ff2868978c?version=3.46.4~ (I was so stupid and overwrote the repl and I can't undo it 😑)

Steps To Reproduce

No response

Expected behavior

The Flyout is not clipped off by the parent Expander Component.

Relevant Assets

No response

Tropix126 commented 2 years ago

Yeah this is an unfortunate limitation of using CSS to position flyouts and not some JS-based DOM library. I've considered switching the flyouts to use something like popper or floating-ui (or just writing my own positioning library), but that's not without limitations as well.