Popover is cut off in scrollable container

[schneisn]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

Set the css attribute overflow: auto; for a parent element of the popover.
The popover is not fully visible.

Expected Behaviour

The popover is fully visible.

Screenshots

Browser version

None

Add any other context about the problem here.

No response

[mfranzke]

@schneisn thanks a lot for your feedback. As we're not using the new popover-HTML-attribute so far (that would display those contents in the top-layer) and neither Anchor Positioning CSS feature, which provides collision control (for similar constellations like the one you've provided), I would expect that we would need some other solution in the meantime.

On the other hand, this might be an edge case (having a narrow area on the page in which overlapping content should get hidden). Is it a blocking problem you're currently facing or just something you wanted to point out regarding a problem that might occur ?

[schneisn]

@mfranzke Thanks for the quick response.

We are facing the issue in every case where we have a popover as a child element in a scrollable element. That is a common case in our application.

Here are some examples where it happens:

A horizontally scrolling element where the popover is cut off at the top and left.

A vertically scrolling element where the popover is cut off at the top. Even when the scrolling element is large, the popover might get cut off.

It is not quite blocking us, but we have to work around it. The workaround is showing the popover with position: fixed; at a fixed position on the page. A fix, or a better workaround, in the next few weeks would help us a lot.