Vue-multiselect: Document how to override CSS styles

[Uninen]

I'm trying to get a very simple select element to my Vue app which uses ES6 and node ( using require('vue-multiselect') ) and adding the component straight to my main Vue instance. It seems extremely hard to override the default styles, which fail monumentally when just adding multiselect-element to the html template that uses plain bootstrap styles (see attached screenshot of the element).

It would be nice to have clear instructions on how to override the default styles, or better yet, default styles that would work without much tweaking :)

Let me know if I can help!

[shentao]

The default styles work in environments where the global defaults are not changed (unless it’s normalize.css)

I think the problem comes from bootstrap in that it overrides some browser defaults and basic selectors. I could fix this with setting the components defaults myself, but this still won’t help if there are some nested (high specificity) rules overriding them.
It is actually a very bad idea to have CSS rules that modify elements like <input> or <button>, rather than using classes.

I like the idea of documenting how to override the default classes. Thanks!

About the default component styles:
Vue-Multiselect styles follow the BEM naming methodology and have flat selectors (very low specificity) whenever possible. This makes it very easy to override (you don’t need !important rules).

An example of how to change the component width would look like this:

.my-multiselect .multiselect {
  width: 100px;
}

So you basically just need to nest the classes you want to modify inside your custom class to increase the specificity of the selector.

Keep in mind that there is a way to create custom components that use vue-multiselect’s logic (as mixins). This way you can personalize the component the way you wish. Refer to the documentation/readme on how to do that.

You could help me with providing the property names that get overwritten in your setup!

[Uninen]

Hi!

thanks for fast reply. For some reason the width is not the only problem in this case, maybe bootstrap styles affect other styles too, as the element height is about 3rem and it acts weird. I'll try to take some time and isolate this to get an example of the problem. I'm quite familiar with CSS, but for some reason this particular case seems very hard.

I'll close the ticket for now :)

[shentao]

@Uninen What is the font-size of the html / body element? Because this is the value that rem is based on. By default it should be 16px, but if this is changed by bootstrap, the sizes might break. I will rewrite the rems as simple px to prevent such problems.

[bmarkovic]

Bootstrap is really, immensely, popular. The undoubtedly number one CSS library still, with few empty spaces on the list before the next runner up.

So ignoring it isn't really a solution.

Since the original post really asks for documentation rather than specific solution I'd kindly ask @Uninen or you @shentao to either reopen, or change the title of this particular issue.

While @Uninen's particular problem is solved, the actual demand as noted by the issue title (having better styling documentation) isn't really addressed at all (the website at https://vue-multiselect.js.org for example, has zero information on styling).

So that someone can open a new issue regarding documentation that is severely lacking in this area.