fluent-svelte
fluent-svelte copied to clipboard
Flyout is clipped off by Expander
Before you start...
- [X] Have you updated your dependencies? You might be using an old version of the library.
- [X] Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.
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
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.