dropdown div hidden when inside table tr

Question

I'm not sure if there is another post similar to this one but I'm hoping this can be a simple fix for someone better as css than me.

See the example here: https://svelte.dev/repl/e7d663de324043f98613b8fe35b8d78f?version=3.47.0

I build the example in Svelte repl but the issue is with the html and css. The problem is that the dropdown part of the SimpleSelector is hidden behind the other rows below it.

I've tried to set the z-order but that doesn't seem to work. I tried playing with the display attribute and position but I can't seem to get this to work the way I want.

Try clicking on the textbox on any row. You'll see part of the dropdown but the rest is hidden.

Thanks in advance for any help.

Answer 1

I figured it out. It seems that the z-index had to be set separately for each row. For example, if there are 100 rows, the first row should have z-index: 100, the second row, z-index: 99, the third, z-index: 98 and so on. That seemed to have done the trick. Here is a link to the updated REPL: https://svelte.dev/repl/e84a80ef53a64af6975705407ddff040?version=3.48.0

However, in the end, I redesigned how the interface will work and I will not be editing inline in the table anymore so I won't be using this solution.