[EuiDataGrid & EuiFlyout] Z-Index of flyout is wrong in a full screen

[mmourafiq]

I am not sure if this is a bug or a feature but after this PR #3655 was merged, this grid example does not work any more when selecting full screen and clicking on the control button that shows the flyout view.

[chandlerprall]

Thanks for reporting, definitely a bug.

Datagrid uses $euiZModal (8000) for its z-index, and the merged PR mentioned changed the flyout's z-index from that same value to $euiZFlyout (3000).

[timroes]

Duplicate of #3469 ?

[chandlerprall]

Similar, but not duplicative - Flyout vs. Modal, as those z-indices are managed separately I'll keep both issues open. Good to have them linked together though, thanks @timroes !

[cchaos]

This one is certainly tough because modals should always appear above flyouts, hence their default z-indexes. There almost needs to be some sort of automatic z-index service that any component's personal z-index will affect those that it triggers? Flyouts kind of do this right now... Not really really sure. Seems like something that needs a lot of engineering thought.

[chandlerprall]

We do have a service to compute a necessary z-index to position one element above another.

eui/src/services/popover/popover_positioning.ts

Lines 730 to 759 in f937fac

	/**
	* Returns the top-most defined z-index in the element's ancestor hierarchy
	* relative to the `target` element; if no z-index is defined, returns 0
	* @param element {HTMLElement}
	* @param cousin {HTMLElement}
	* @returns {number}
	*/
	export function getElementZIndex(
	element: HTMLElement,
	cousin: HTMLElement
	): number {
	/**
	* finding the z-index of `element` is not the full story
	* its the CSS stacking context that is important
	* take this DOM for example:
	* body
	* section[z-index: 1000]
	* p[z-index: 500]
	* button
	* div
	*
	* what z-index does the `div` need to display next to `button`?
	* the `div` and `section` are where the stacking context splits
	* so `div` needs to copy `section`'s z-index in order to
	* appear next to / over `button`
	*
	* calculate this by starting at `button` and finding its offsetParents
	* then walk the parents from top -> down until the stacking context
	* split is found, or if there is no split then a specific z-index is unimportant
	*/

It assumes the elements are structured correctly, as there are some edge cases where you cannot z-index elements correctly given a really bad DOM.

I think this is all complicated further by the default z-indices being set through CSS. Perhaps, in the CSS-in-JS future, these types of elements (flyouts, modals, popovers) set a context with their "base" z-index and then they read that value and add their relevant z-index value. E.g.

• flyout opens, not nested, it has z-index of 3000, sets that to context
• modal opens through the flyout, inherits 3000 as its base, adds 8000
• modal triggers a flyout... terrible UX but whatever, flyout inherits (3000+8000=11000) and adds 3000
• etc

[cee-chen]

I can't reproduce this bug anymore in https://elastic.github.io/eui/#/tabular-content/data-grid-control-columns as of latest master. I believe this was fixed by #5054