Open JVariance opened 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.
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