Closed niti11 closed 6 years ago
me too
Hi all.
Can anyone have the solution for this issue?
Did anyone got the chance to try this https://adamwathan.me/renderless-components-in-vuejs/?
@niti11 you just need to increase specificity. I've tried to make the rules the least specific as possible so they can be overridden. Try adding an id or extra class to your select:
<v-select id="mySelect" />
#mySelect .v-select .dropdown-toggle {
border: none;
}
@Gil-1 the plan for 3.0 is to take that approach.
go to your node_modules/vue-select/dist/vue-select.js and change the dropdown-toggle class!
should be reopened...no solution it works when selected...but css changes in dropdown state (while selection)
@sagalbot Hi, probably do you have any ideas how to customise styling for placeholder ? It would be very cool. Thanks in advance.
go to your node_modules/vue-select/dist/vue-select.js and change the dropdown-toggle class!
What would you do if your app is dockerized ?
@niti11 you just need to increase specificity. I've tried to make the rules the least specific as possible so they can be overridden. Try adding an id or extra class to your select:
<v-select id="mySelect" />
#mySelect .v-select .dropdown-toggle { border: none; }
This works, as long as your CSS isn't scoped. Learned it the tedious way. Works now.
<style>
= Works
<style scoped>
= Doesn't work
Use deep selector to make it work with scoped css.
There is some way to import with webpack just the js without css?
@MatheusR42 not in v2.x – CSS and JS are separated in upcoming 3.0 release.
Using id
for specificity is perhaps not the best idea because you are not supposed to have multiple elements with the same ID. Here is a solution that avoids that problem:
<template>
<v-select :id="elementId" :name="name"></v-select>
</template>
...
computed: {
elementId() { return `YourSelect-${this.name ? this.name : this.getUniqueId()}`; },
},
methods: {
// generates 16char base64 string in case `name` prop is omitted
// ex: YourSelect-MC4yMzI0ODM1MDcx
getUniqueId() { return btoa(Math.random()).substring(0, 16); },
},
In your stylesheet (shown with Tailwind CSS):
/* div[id^='YourSelect-'] is wildcard matcher for IDs with `YourSelect-*` */
div[id^='YourSelect-'] .dropdown-toggle { @apply .w-full .flex .flex-row .items-center .bg-white .text-grey-700 .truncate .border .border-grey-300 .rounded-none .p-16; }
div[id^='WsSelect-'] .dropdown-toggle .form-control { @apply .p-0 .m-0; }
div[id^='WsSelect-'] .dropdown-toggle .vs__actions { @apply .p-0 .m-0; }
It does work to just give it id="YourSelect"
and use CSS #YourSelect .dropdown-toggle
, but I do not consider this a good solution as some dev tooling will probably throw errors when multiple elements have the same ID.
Without unique ID attributes, document.getElementById()
will return the first dropdown that appears on the page, thus making your dropdown component not as reuseable or composable--at least not properly.
Over the past while, I find the best way to reliably edit the styles is to do the following series of steps:
node_modules/vue-select/src/components/
Select.vue
.v-select
and replace it with div[id^='YourSelect']
(read my previous comment above this one to understand YourSelect
)It looks like doing what I just described added 6kb to my CSS (prior to overwriting all the styles with Tailwind utility classes), which isn't too horrific, but an astute observer will notice that we are wasting 6kb by double-loading these styles.
If this isn't clean enough for you, then you should probably just copy/paste the library into your Vue components folder and not even use the library, because it's overall not that complex. The library consists of one Vue component and 3 mixins. Take a look in the node_modules
folder and play around a bit.
@agm1984 thanks for the suggestions. I have one final breaking change to wrap up and v3 is ready to ship. Here's what's been done so far on this topic:
vs__
prefix to avoid class collisions It sounds beautiful, can't wait.
<v-select class="style-chooser">
.v-menu__content { border-radius: 10px !important; }
It works for me
using custom class or id didn't work on me so i tried removing it on selector and then directly access the element using the vuetify's selector.
`
// not working
// working
`Worked!!! change css default v-select add plugins
import Vue from 'vue'
import vSelect from 'vue-select'
// import 'vue-select/dist/vue-select.css' //default
import '@/assets/scss/vendor/v-select.scss' // custom
Vue.component('v-select', vSelect)
Hi All How can we add the css to this select box. I want to remove the border for select box & also want to set postion as top for the option box.
I tried this way. .v-select .dropdown-toggle { border: none !important; }
But It doesn't work for me. Can you help me on this?