You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The V2 version of the component automatically "flips" the popover to render on top of the trigger if there isn't enough space below it. In the specific example of the block toolbar, this causes a small visual glitch when the browser's viewport is short enough to cause the flip:
This glitch happens because the block toolbar's header has position: sticky, which causes it to render on top of the select popover despite a lower z-index.
A few preliminary ideas that try to avoid the problem rather than solving it:
disallow the popover to flip
allow for lower minimum height
I'm not sure we can solve this systematically at the CSS level. At most we could look into where in the DOM the popover is rendered, and consider portalling it so that it plays better with the stacking context?
The text was updated successfully, but these errors were encountered:
ciampo
changed the title
conflict with stacking context when rendering next to position: sticky elements
CustomSelectControl V2 popover renders below position: sticky elements
Jul 5, 2024
While #63357 should avoid the issue for the V2 legacy adapter (soon to be the new V1) component, we will still need to understand how to best solve this for the V2:
keep flip disabled (although we could encounter the same issue in future layouts / etc)
somewhat set as "boundaries" for the popover the correct height of the panel (excluding the header)
solve it via allowing the popover to be portaled to a plan in the DOM where the stacking context is not a constraints
As flagged in #62821 (see PR description):
The V2 version of the component automatically "flips" the popover to render on top of the trigger if there isn't enough space below it. In the specific example of the block toolbar, this causes a small visual glitch when the browser's viewport is short enough to cause the flip:
This glitch happens because the block toolbar's header has
position: sticky
, which causes it to render on top of the select popover despite a lowerz-index
.A few preliminary ideas that try to avoid the problem rather than solving it:
I'm not sure we can solve this systematically at the CSS level. At most we could look into where in the DOM the popover is rendered, and consider portalling it so that it plays better with the stacking context?
The text was updated successfully, but these errors were encountered: