Vue-select: v-select dropdown is not visible

[smatei]

Hello,

I am trying to add the v-select to my .vue template like this:

`<template>
<div>
...........
<div v-cloak v-show="showHosts()">
<label class="form-control-label">
Hosts
</label>
<v-select :searchable=true multiple :value.sync="selected" :options=options></v-select>
</div>
..............

</div>
</template>

.............
data () {
return {
selected: null,
options: JSON.parse('[{"label": "foo", "value": "Foo"},{"label": "boo", "value": "Boo"},{"label": "loo", "value": "Loo"},{"label": "moo", "value": "Moo"},{"label": "zoo", "value": "Zoo"}]')
}
},
components: {vSelect},`

However, even if I can type and select the "foo" and "boo" items, the dropdown menu ul tag displays transition="expand" and the dropdown is not displayed.

My package.json contains:

"dependencies": {
"vue": "^2.1.10",
"vuetable-2": "^1.0.1",
"vue-events": "vue-2.x",
"vue-select": "^2.1.0"
},
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-sync": "^0.1.4",
"webpack-stream": "^3.2.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.1",
"gulp-sass": "^2.3.1",
"gulp-uglify": "^1.5.3",
"yargs": "^4.7.1",
"gulp-replace": "^0.5.4",
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.13.2",
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-loader": "^7.3.0",
"vue-html-loader": "^1.0.0"
}

I also use Bootstrap v4.0.0-alpha.6.

What am I doing wrong?

[sagalbot]

@smatei, you're not actually doing anything wrong. I've been testing with bootstrap 4.0.0-alpha.5, which works great, but now that I check the bootstrap releases I see that's old. Sounds like 6 is the last alpha, so I'll see what I can do to patch this up.

[sagalbot]

This will be fixed in the next release, but in the meantime you can simply add the following:

.v-select .dropdown-menu {
  display:block;
}

[sagalbot]

no dropdown in bootstrap4 alpha-6

[sagalbot]

Fixed in v2.2.0.

[smatei]

Thank you @sagalbot !

[sagalbot]

Happy to help!

[hemulin]

Using Bootstrap 4.0.0-beta.2, the v-select element looked rather bad. The fix for me was a simple

.v-select {
  display: grid;
}

It is supported in modern browsers (not so much on IE)