Vue-select: Z-index problems

[crashkonijn]

Hello,

While implementing this into our project I ran into the following issue where the popup box of vue-select will render below other items on the page. I've tried making the z-index higher but this doesn't change anything. I've tried looking for similar issues here but I was unable to find an answer, hopefully you guys can help me out!

We're using bootstrap 4.1.1 and vue-select 2.4.0.

[crashkonijn]

I've been able to narrow the problem down to a problem caused by animate.css, specifically this css line:

.animated {
  animation-fill-mode: both;
}

I've been unable to write css that fixes this by applying animation-fill-mode: none; to any of the vue-select styles, maybe one of you guys can manage this? Animated.css is a very popular package.

In the mean time this is the solution that I'm applying for any animations that are parents of my vue-select instance:

.animated {
    &.fill-fix {
        animation-fill-mode: none;
    }
}

[rserota]

You might be overthinking this.

.dropdown-menu {    
    z-index:10030 !important;
}

This worked for me (I was using another 3rd party component that had z-index:10010; for some reason).

[crashkonijn]

@rserota I've had it higher then that, also it's just default bootstrap 4 that it's rendering behind.

[sytheveenje]

I have the same issue, can't find a solution. The animation hack from @crashkonijn didn't work either.

[crashkonijn]

@sytheveenje Are you also using animate.css? The .fill-fix isn't a class that's normally used and is something I made up myself. The .fill-fix class should be added to the same html element that has the .animated class. (Only if it's on a parent element of vue-select)

[sytheveenje]

No, I don't use animate.css. I fixed the issue, some other element had a wrong z-index 😛. Thanks for your help anyway.

[sagalbot]

In v3, you’ll be able to set the zindex directly with scss or css variables. I’ve also renamed all class to avoid conflicts with other libraries.