Layout Issue of vue-select in Vue.js

Question

When I test vue-select in POC project, it works well, see screen shot below:

However, when I use vue-select in my real project, it is disordered, see screen below, did any one have similar issue and how to fix it?

after @import "vue-select/src/scss/vue-select.scss";

Thanks George

score 0 · Answer 1 · answered Nov 05 '20 at 20:03

0

You of course realize that no CSS is applied to the markup, so you need to apply some cuatom CSS.

Or, see the Vue Select docs how to include their default CSS:

The component itself does not include any CSS. You'll need to include it separately:

import 'vue-select/dist/vue-select.css';

Alternatively, you can import the scss for complete control of the component styles:

@import "vue-select/src/scss/vue-select.scss";

answered Nov 05 '20 at 20:03

Shaya Ulman

Thanks Shaya. I definitely included " import 'vue-select/dist/vue-select.css';" but it doesn't work. However I like to try with @import "vue-select/src/scss/vue-select.scss"; how to use it. Do I need to create a separate scss file under assets folder? Thanks George – user1456650 Nov 06 '20 at 15:28
Hi Shaya, My existing project has css already, Can I have both css and scss? – user1456650 Nov 06 '20 at 16:26
@user1456650, in which file did you include `import 'vue-select/dist/vue-select.css';`? – Shaya Ulman Nov 07 '20 at 16:49
Hi Shaya, I include import "vue-select/dist/vue-select.css" in nain.js – user1456650 Nov 09 '20 at 15:11
I did the same thing as that in POC project, POC works well. – user1456650 Nov 09 '20 at 15:25
after @import "vue-select/src/scss/vue-select.scss"; it is improved, but still not good, see 3rd screen shot above. – user1456650 Nov 09 '20 at 15:52
The clear button "X" and Arrow "^" are in spinning. in vue-select.scss, it imports: – user1456650 Nov 09 '20 at 18:43
it has imports "modules/spinner"; "global/animations"; I try to remove them, it doesn't work either – user1456650 Nov 09 '20 at 18:58

1 Answers1