vue-multiselect does not load CSS

up vote
1
down vote

favorite

I am using vue-multiselect component (b15) with vue-cli (webpack template) but the component's CSS is not loaded and the component renders wrong. Any idea?

My code:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          :options="localOptions"

          :label="labelKey"

          track-by="id"

          :multiple="multiple"

          :selected="value"

          :searchable="true"

          :placeholder="placeholder" 

          :loading="loading"

          :custom-label="formatLabel"

          :disabled="disabled"

          :readonly="readonly"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],



  components: {

    Multiselect

  }

}

</script>

Multiselect is rendered and everything just no style is applied.

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

Little bit of code might help in providing the solution.
– Saurabh
Mar 19 '17 at 14:52

1

Can you add relevant CSS as well.
– Saurabh
Mar 19 '17 at 15:02

Which CSS? The component's native CSS that is build into the component is not loading for me...
– Primoz Rome
Mar 19 '17 at 15:03

has-error should be a CSS class.
– Saurabh
Mar 19 '17 at 15:06

It is. It's just an utility class that get's applied if form has error... My question is not related to my app logic. That works fine. Problem I have the multiselect component is not loading it's own styles.... like .multiselect__*.*
– Primoz Rome
Mar 19 '17 at 15:09

|
show 1 more comment

up vote
1
down vote

favorite

I am using vue-multiselect component (b15) with vue-cli (webpack template) but the component's CSS is not loaded and the component renders wrong. Any idea?

My code:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          :options="localOptions"

          :label="labelKey"

          track-by="id"

          :multiple="multiple"

          :selected="value"

          :searchable="true"

          :placeholder="placeholder" 

          :loading="loading"

          :custom-label="formatLabel"

          :disabled="disabled"

          :readonly="readonly"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],



  components: {

    Multiselect

  }

}

</script>

Multiselect is rendered and everything just no style is applied.

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

Little bit of code might help in providing the solution.
– Saurabh
Mar 19 '17 at 14:52

1

Can you add relevant CSS as well.
– Saurabh
Mar 19 '17 at 15:02

Which CSS? The component's native CSS that is build into the component is not loading for me...
– Primoz Rome
Mar 19 '17 at 15:03

has-error should be a CSS class.
– Saurabh
Mar 19 '17 at 15:06

It is. It's just an utility class that get's applied if form has error... My question is not related to my app logic. That works fine. Problem I have the multiselect component is not loading it's own styles.... like .multiselect__*.*
– Primoz Rome
Mar 19 '17 at 15:09

|
show 1 more comment

up vote
1
down vote

favorite

I am using vue-multiselect component (b15) with vue-cli (webpack template) but the component's CSS is not loaded and the component renders wrong. Any idea?

My code:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          :options="localOptions"

          :label="labelKey"

          track-by="id"

          :multiple="multiple"

          :selected="value"

          :searchable="true"

          :placeholder="placeholder" 

          :loading="loading"

          :custom-label="formatLabel"

          :disabled="disabled"

          :readonly="readonly"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],



  components: {

    Multiselect

  }

}

</script>

Multiselect is rendered and everything just no style is applied.

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

I am using vue-multiselect component (b15) with vue-cli (webpack template) but the component's CSS is not loaded and the component renders wrong. Any idea?

My code:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          :options="localOptions"

          :label="labelKey"

          track-by="id"

          :multiple="multiple"

          :selected="value"

          :searchable="true"

          :placeholder="placeholder" 

          :loading="loading"

          :custom-label="formatLabel"

          :disabled="disabled"

          :readonly="readonly"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],



  components: {

    Multiselect

  }

}

</script>

Multiselect is rendered and everything just no style is applied.

vuejs2 vue-component

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

edited Mar 19 '17 at 14:55

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

asked Mar 19 '17 at 14:27

Primoz Rome

4,93495177

Little bit of code might help in providing the solution.
– Saurabh
Mar 19 '17 at 14:52

1

Can you add relevant CSS as well.
– Saurabh
Mar 19 '17 at 15:02

Which CSS? The component's native CSS that is build into the component is not loading for me...
– Primoz Rome
Mar 19 '17 at 15:03

has-error should be a CSS class.
– Saurabh
Mar 19 '17 at 15:06

It is. It's just an utility class that get's applied if form has error... My question is not related to my app logic. That works fine. Problem I have the multiselect component is not loading it's own styles.... like .multiselect__*.*
– Primoz Rome
Mar 19 '17 at 15:09

|
show 1 more comment

Little bit of code might help in providing the solution.
– Saurabh
Mar 19 '17 at 14:52

1

Can you add relevant CSS as well.
– Saurabh
Mar 19 '17 at 15:02

Which CSS? The component's native CSS that is build into the component is not loading for me...
– Primoz Rome
Mar 19 '17 at 15:03

has-error should be a CSS class.
– Saurabh
Mar 19 '17 at 15:06

It is. It's just an utility class that get's applied if form has error... My question is not related to my app logic. That works fine. Problem I have the multiselect component is not loading it's own styles.... like .multiselect__*.*
– Primoz Rome
Mar 19 '17 at 15:09

Little bit of code might help in providing the solution.
– Saurabh
Mar 19 '17 at 14:52

Can you add relevant CSS as well.
– Saurabh
Mar 19 '17 at 15:02

Which CSS? The component's native CSS that is build into the component is not loading for me...
– Primoz Rome
Mar 19 '17 at 15:03

has-error should be a CSS class.
– Saurabh
Mar 19 '17 at 15:06

It is. It's just an utility class that get's applied if form has error... My question is not related to my app logic. That works fine. Problem I have the multiselect component is not loading it's own styles.... like .multiselect__*.*
– Primoz Rome
Mar 19 '17 at 15:09

|
show 1 more comment

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

You need to add css seperately at the end, so you file looks like that:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],

      components: {

    Multiselect

  }

}

</script>



<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Nov 20 at 14:48

frost

4551515

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42887724%2fvue-multiselect-does-not-load-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

You need to add css seperately at the end, so you file looks like that:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],

      components: {

    Multiselect

  }

}

</script>



<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Nov 20 at 14:48

frost

4551515

add a comment |

up vote
1
down vote

accepted

You need to add css seperately at the end, so you file looks like that:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],

      components: {

    Multiselect

  }

}

</script>



<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Nov 20 at 14:48

frost

4551515

add a comment |

up vote
1
down vote

accepted

You need to add css seperately at the end, so you file looks like that:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],

      components: {

    Multiselect

  }

}

</script>



<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Nov 20 at 14:48

frost

4551515

You need to add css seperately at the end, so you file looks like that:

<template>

  <div>

      <div class="select2-container select2-container-multi full-width">

        <multiselect

          class="form-control form-control-select textarea" 

          :class="{ 'has-error': showError }"

          @input="updateSelected"

          @close="blur">

        </multiselect>

      </div>

  </div>

</template>



<script>

import Multiselect from 'vue-multiselect'



export default {

  mixins: [inputMixin],

      components: {

    Multiselect

  }

}

</script>



<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Nov 20 at 14:48

frost

4551515

answered Nov 20 at 14:48

frost

4551515

answered Nov 20 at 14:48

frost

4551515

answered Nov 20 at 14:48

frost

4551515

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg