How to dynamically position a fixed element

Ask us anything
, ,
1

I need to place custom dropdown component inside a custom table component.
The dropdown can sometimes appear outside the table’s bounds and the table has overflow:hidden.

I need the dropdown position to be set dynamically based on the cell it is in.

However I cannot give the dropdown a position:absolute because it would be clipped by the table.

It needs to have a position:fixed.

I try binding something like : context.thisInstance.getBoundingClientRect()
but I am a bit stuck as it often returns 0 because the value is set before the data is populated in the table. therefore the dropdown displays at the wrong place.

Thanks for your insights!

2

If you can use ids on each cell then you could call the cells that require this a dynamic id like cell_ then turn on advanced interactions which gives you the x and y of the each. Then you can dynamically select each indexed cell like you can see in this icon one here you’d have one of these for each cell. Then you just tell the rows dropdown to be positioned by cell_ x and y.

image
image489×315 14.7 KB

3

That’s it !! Thanks a lot for your quick help.

4

Glad this solved it for you!