Change width of dropdown menu of v-combobox

Question

I'm trying to make a multiple search filter like the one in Gitlab dashboard.

For that purpose, i'm using Vuetify v-combobox like so :

    <v-combobox
        id="mycombo"
        v-model="model"
        :items="items"
        multiple
        small-chips
    >
        <template v-slot:item="{ index, item }" >     
            <v-icon>
                {{item.icon}}
            </v-icon>
            <span>
                {{ item.text }}
            </span>                 
        </template>
    </v-combobox>

The first obstacle I encounter is changing the width of the dropdown. When I inspect in the browser I see some element style :

    <div class="v-menu__content theme--light menuable__content__active v-autocomplete__content" style="max-height: 304px; min-width: 1543px; top: 193px; left: 308px; transform-origin: left top; z-index: 8;">

If I modify the min-width parameter directly in the inspector, I can successfully change the width of the dropdown.

My question is how can I do the same thing in code (preferably in the scoped CSS) ?

I tried :

• Adding a class to a template v-slot:item -> not possible
• Changing style of v-autocomplete content since v-combobox is a child of v-autocomplete :

    .v-menu__content .menuable__content__active .v-autocomplete__content {
        min-width: 250px !important;
    }

• I read about deep styling but could not understand how to use it in this case

What is the general process for styling a vue component ?

Thanks for reading, hava g'day mates !

Answer 1

You can use :menu-props for your styles:

 <v-combobox
     id="mycombo"
     v-model="model"
     :items="items"
     multiple
     small-chips
     :menu-props="{ minWidth: '250', maxHeight: '600' }"
 >
   <template v-slot:item="{ index, item }">
     <v-icon>
       {{ item.icon }}
     </v-icon>
     <span>
        {{ item.text }}
     </span>
   </template>
 </v-combobox>