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 !
