Stacking context issue

[kilkujadek]

Hello, first of all - thank you for such a great script!

I have a little problem with using multiselect plugin together with the dynamic scroller. It renders correctly only in one direction, which depends on scrolling direction.

I've made a simple demo, select appear is in edit mode (double click): https://codesandbox.io/s/z-index-issue-rxkkx Check two selects at top and bottom of page - one of them will be under scroller rows.

Any suggestion of how this could be fixed?

[pleek91]

I'm also running into this same problem. I was able to hack a solution together that involved adding a z-index to the row the user is currently interacting with, and then removing that z-index when the user clicks off of that row. Basically something like this

element.closest('.vue-recycle-scroller__item-view).style.zIndex = '1';

Where element is something inside your row that the user has interacted with. You'll also need to do the inverse to remove the z-index when the user is done.

[ploissken]

Argh, I have been trying for 3 hours, setting z-indexes everywhere... No juice at all.

[kilkujadek]

I've spend more then 3 days ;)

I've finally sort it with @AousAnwar solution: https://github.com/Akryum/vue-virtual-scroller/pull/138

I've modify it, so every row is using top instead of transform.

[ploissken]

Finally made it work!! Thanks @kilkujadek

[bobaoapae]

Hello, can this be merged? I have this issue here

[DGollings]

I've spend more then 3 days ;)

I've finally sort it with @AousAnwar solution: #138

I've modify it, so every row is using top instead of transform.

@kilkujadek Running the @AousAnwar solution which fixes it for modals (thanks btw), but can't get it to fix my multiselect issue which I think is the same problem you had. 'Top' doesnt seem to matter.

Could you post an code snippet of your solution? Could maybe help the barely competent at frontend dev, asking for a friend :)

[Akryum]

BTW, views are recycled, so their position in the HTML doesn't match their position on display.

[mohamadrezahedayati]

Hi @kilkujadek @Akryum

Like you, I had the same problem and I installed and used vue-virtual-scroller plugin , multiselect plugin together.

Of course, vue-virtual-scroller has a problem with dropdown in terms of z-index and I did a lot of tests for this issue.

But this problem we have is not from vue-virtual-scroller plugin I think this problem is from multiselect plugin and I solved it as follows :

You add append-to-body directive to your component ( v-select )

further reading : vue-select - appendToBody

[ahmadmu]

I'm having the same issue with vue bootstrap's b-dropdown, top direction works fine, the bottom doesn't. Adding a z-index to the current row as @pleek91 suggested works and puts the dropdown on top, but is there a better solution for it?

[Akryum]

I think the best solution is to not have elements overflowing from an item is the list, as it's a virtual list and the actual z-index of each row is random (depending on the recycling). Use a solution that appends/teleports the dropdown to somewhere else, like floating-vue.