xtiancastro7 xtiancastro7 - 26 days ago 27
Javascript Question

Vue multiselect show always behind Bootstrap input groups

I'm having a really hard time with this.
I'm using Vue Multiselect and Bootstrap's 3 Input Groups.

The problem here is that the multiselect options show behind the input group no matter what z-index I use on it. I know that I can change input group z-index to 0, but watching Bootstrap SASS files it says: "Ensure that the input is always above the appended addon button for proper border colors" so I don't know if it is safe to do this:

.input-group .form-control {
z-index: 0;
}


I tried every selector on the multiselect but none makes effect. Any help would be appreciated.
Here is the fiddle: https://jsfiddle.net/cristiancastrodc/c9gdxg3s/

clk clk
Answer Source

It looks like the cause of this is that in the vue-multiselect.min.css file that defines these stylings, .multiselect--active only has a z-index of 1. Clicking the multiselect dropdown toggles that active class.

Changing the z-index on .multiselect--active to something greater than 2, which is the value for the input box, would probably be the best way to solve this issue.

I've put this updated solution in a new fiddle.