I am currently working on creating a multiple search filter similar to the one found in Gitlab dashboard.
https://i.sstatic.net/YHivl.png
For this task, I am utilizing Vuetify's v-combobox like this :
<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 main issue I am facing is adjusting the width of the dropdown. Upon inspecting in the browser, I notice certain element styles :
<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;">
By directly modifying the min-width parameter in the inspector, I am able to successfully alter the dropdown width.
My question is how can I achieve the same result in code (preferably using scoped CSS) ?
I have attempted :
- Adding a class to a template v-slot:item -> not possible
- Changing the 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 have heard about deep styling but could not grasp how to apply it in this scenario
What is the typical process for styling a vue component ?
Thank you for taking the time to read, have a great day everyone!