CSS Conflict with vue-bootstrap/bootstrap4

[soichih]

I am using vue-select to replace vue-bootstrap default select box. I believe this issue started when I upgraded vue-bootstrap to 2.0 (which loads bootstrap 4.1.1), but vue-select stying seems to be broken with the version I am using (v2.5.1)

(See the odd caret mark on the right side of the select box, and the height of the select box seems unnecessarily bloated..)

I am loading bootstrap css like so..

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.min.css'

If I remove these, the issue goes away.

I am not sure if this is vue-bootstrap issue, but is there anyway to make vue-select not conflict with vue-bootstrap?

[soichih]

I've patched this issue with following CSS rules for now

 /*prevent bootstrap-vue css conflict*/
.v-select.dropdown .dropdown-toggle::after {
content: inherit;
}
.v-select.dropdown .form-control {
height: inherit;
}

[bakatz]

Having the same issue - above CSS did not fix it for me (possibly because I'm on multiselect mode). For now, I've downgraded to 2.4.0 specifically, which works fine but requires some other CSS hacks.

[DjeeBay]

In my case the following did the trick. But not sure it is the best way to do it :

.v-select.dropdown .dropdown-toggle::after { display: none; }

[franciscotrillo]

I've patched this issue with following CSS rules for now

 /*prevent bootstrap-vue css conflict*/
.v-select.dropdown .dropdown-toggle::after {
content: inherit;
}
.v-select.dropdown .form-control {
height: inherit;
}

I had to use content: normal; instead of content: inherit;

[chrislebaron]

CSS fix did not work for me either, but downgrading to 2.4.0 did the trick.

[tranghaviet]

I've patched this issue with following CSS rules for now

 /*prevent bootstrap-vue css conflict*/
.v-select.dropdown .dropdown-toggle::after {
content: inherit;
}
.v-select.dropdown .form-control {
height: inherit;
}

this work perfectly, thanks.

[sreenadh]

The following CSS rules solved my issue.

.v-select.dropdown .dropdown-toggle::after {
    content: normal !important;
}
.dropdown .dropdown-menu
{
    transform: scale(1, 1) !important;
}

[Davroniy]

how to downgrade to version 2.4.0?

[Davroniy]

Having the same issue - above CSS did not fix it for me (possibly because I'm on multiselect mode). For now, I've downgraded to 2.4.0 specifically, which works fine but requires some other CSS hacks.

How to downgrade to that version?

[sagalbot]

This is generally caused by the class name collisions. From the start I wrote vue-select to depend on bootstrap, but moved away from that in 2.0 and aimed for compatibility instead. I left the classnames the same however, and that was a mistake. In v3, all classnames are unique and prefixed with vs__.

I'm looking to release a beta of v3 today, and I'll take a few mins now to see if I can quickly patch this up in a 2.6.3 release.

[sagalbot]

Fixed with #796 and released in v2.6.3.

Thanks @soichih for posting your solution, I added almost exactly that to the codebase.

@Davroniy recommend upgrading to 2.6.3 now instead of downgrading as there as many other fixes in 2.6.

[Davroniy]

@sagalbot it (version 2.6.3) has another issue with carrot icon on the right up corner

Update: sorry, it got solved in version 2.6.3/ Yesterday it had problems