Vue multiselect show always behind Bootstrap input groups

user_4974674 0
Viewed 1859

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/

vuejs2 twitter-bootstrap css javascript
2 Answers

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.

user_46716310

Try

.input-group {
  z-index: -1;
}
user_47162450
Related