Vue-grid-layout: Z-index problem

[goalie7]

Hello again!

I'm trying to make some widgets for filtering data, but what I've found is that grid items in different rows are likely in different levels.

At first I thought it was something more related with charts because the following datepicker was showing behind but I can not click even in the visible parts (the one that are in red area):

Also, when having custom select components, the same happens:

Have you faced something like this? I played with z-index but nothing worked

UPDATED
Here is a version without the chart:

[gmsa]

The only place where z-index is used on vue-grid-layout is when dragging.
I think the problems you have are between the charts and the datepicker.

[goalie7]

Thanks for your fast answer, with custom selects as (vue-select and vue-multiselect) this happens too, not with native btw.

I thought the same, but check the update without chart is neither working, I will take a look further.

[itsarbit]

@goalie7 Did you finally solve this problem? How did you do that?

[thomashdk]

Do you find a fix for this? have the same issue?

[Cgarcilazo]

Hi, i've been having a problem putting a toolbar in front of any grid element, as you can see:

There is a problem using z-index and transform traslate3d(), as you can see here:
https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate
What i did to solve this problem is just deactivate css-transforms by doing :use-css-transforms="false" on the grid layout, so the z-index works now. I hope it helps someone.

[hiendv]

@Cgarcilazo Thank you. Your workaround works for me.