fluent-svelte icon indicating copy to clipboard operation
fluent-svelte copied to clipboard

Flyout is clipped off by Expander

Open JVariance opened this issue 3 years ago • 1 comments

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

JVariance avatar Feb 19 '22 11:02 JVariance

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.

tropicaaal avatar Feb 20 '22 05:02 tropicaaal