Hello all. We have a popover (tooltip essentially) in each row of a column of our grid. Has anyone found a way through javascript or css/sass to bring the popover to the front so it isn’t cut off? We’ve tried different methods through z-idex and overflow but no results. Thank you.
Is your question about Framework Grid or Elements Grid?
If it is about Elements, check this one, if it is somewhat related.
It’s the Elements Grid.
Thank you for the suggestion but I’m now sure how to apply this issue to my situation. Are you suggesting a customer wrapped to place the vaadin-grid-column and the popover markup to bring the popup component outside the column itself?
Yeah, the issue Tatu linked to is not relevant to your question, I agree.
This is a known issue in list elements that recycle and reorder DOM elements for performance reasons (iron-list and vaadin-grid are the most common ones). Since the rows are positioned using transforms, each row becomes a new stacking context, so you can’t overlap contents inside a row on top of subsequent rows after it. Here’s a relevant issue:
https://github.com/vaadin/vaadin-grid/issues/842
We have a prototype for vaadin-grid which avoids this issue, but we haven’t found the time yet to finish it.
I think your best option is to create a new tooltip element which extends
vaadin-overlay
. The vaadin-overlay element avoids this issue by “teleporting” the overlay directly under the body element, so it’s outside the rows stacking context. All current Vaadin elements which have an overlay utilize this (vaadin-combo-box, vaadin-date-picker, vaadin-dropdown-menu, vaadin-context-menu, etc.).