CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapvuejs2
cristiancastrodc
cristiancastrodc

Reputation: 157

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/

Upvotes: 3

Views: 2914

Answers (2)

clk
clk

Reputation: 238

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.

Upvotes: 4

Richard Matsen
Richard Matsen

Reputation: 23483

Try

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

Upvotes: 1

Related Questions