How to custom dropdown?

[Adikaarif]

I want one of my multiselect dropdowns to have a width of 600px, how do I adjust the .multiselect-dropdown class? (this is because my programming knowledge is still shallow)

[rafia9005]

solution to problem

maybe like this:

<template>
  <div>
    <Multiselect
      v-model="value"
      :options="options"
    />
  </div>
</template>

<script>
  import Multiselect from '@vueform/multiselect'

  export default {
    components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    }
  }
</script>

<style scoped>
/* Scoped style for multiselect dropdown */
.multiselect-dropdown {
  width: 600px !important;
}
</style>

If it doesn't work, you can read the source directly, and look for the class and customize it yourself.

[Adikaarif]

What if I have 3 multiselect in a file and I only want one of them to have a dropdown width of 600px?

[rafia9005]

<Multiselect
      v-model="value3"
      :options="options"
      :classes="{ dropdown: 'custom-dropdown-width' }"
    />

<style scoped>
.custom-dropdown-width {
  width: 600px !important;
}
</style>

try again