Skip to main content

I have a component for a table cell with a variant for the header. Within it I wanted to make a dropdown/context menu that appears on click. I’m running into an issue where the absolutely positioned element is nested visually below the element parent’s sibling.


In this example, the top table/cell is correct and I want it on top (the gray colored cell). Below you can see the further breakdown of it’s sub elements.


However, this visually appears like this where the children of the parent (gray cell) are somehow below the sibling element of the parent (white cell) which has a higher “z-index”.


Screenshot 2023-11-11 at 5.44.55 PM


To achieve this context menu effect I have the “Context Menu” layer as absolutely positioned to the bottom and right.


Is this the wrong way to do this? If it’s not, how do I put the context menu above the other elements?

The layer order in auto layout is reversed by default. You can change that:


image

Thanks @Gleb and that helps within the same component or group but it doesn’t have an effect when it’s a component being used nested in any other autolayout.


The issue im running into is it’s not very reusable because while I can reverse order of everything that has this table header cell + context menu component nested it’s cumbersome (especially in this particular use case as there’s like a dozen columns) as well as confusing for anyone else to reuse as they have to know to also reverse order of everything they put it in.


Here’s a use case here. I have this table, it has 11 columns. It doesn’t show despite being reverse order. It will show if I change my table, column, etc all to reverse order also but, again, i need to do it for every column and need to somehow explain this to everyone who uses this.


Screenshot 2023-11-12 at 12.15.01 AM


In other words if I have ComponentA and its set to a “z-index” of 2 and ComponentB set to 1. I want ComponentA’s SubComponent to also be 2 rather than how it behaves now which is strangely that “SubComponent” is more like 0.9 as its less than ComponentA and ComponentB.

Reply


Terms & ConditionsCookie settings