Vue-select: Bootstrap form-control

[eduarguz]

I am having an issue with my form control class from bootstrap

default classes are overriding bootstrap classes

<div class="form-group"> <label for="departament" class="col-md-3 control-label">{{__("Departament")}}:</label><div class="col-md-6"><v-select :options="['foo','bar']"></v-select</div></div>
or am i doing something wrong ?

[zeratulmdq]

Check the source, this component doesn't use any bootstrap class. What's been overridden in you example?

[eduarguz]

@zeratulmdq
it has a class in the input
https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L275
which is not being applied to my template

Now if i add the class in the
<v-select class="form-control" :options="['foo','bar']"></v-select>

it looks like:

with the classes being applied but looking pretty bad

[sagalbot]

Are you writing any scss yourself? You could do something like:

.v-select .dropdown-toggle {
  @extend .form-control;
}

[setefocos]

Same problem here. I can't make it work:

<v-select class="form-control" v-model="form.cod_municipio_ibge" :options="['foo','bar']"></v-select>

@eduarguzher, did you make it work anyway?

[sagalbot]

@setefocos that will just apply the form-control class to the wrapper, not the actual input. Since v2.1.0 I dropped the bootstrap dependencies to make it work better with all CSS frameworks, so you'll have to write some css yourself.

[mateusevcarvalho]

Tambem estou com o mesmo probelma, estou usando o sass e fiz como mandou:
.v-select .dropdown-toggle {
@extend .form-control ;
}

mas não adiantou.