I'm looking to adjust the height of the Vuetify v-autocomplete component, which is currently set at 304px (possibly a calculated value).
<v-autocomplete
class="flex-grow-0 ml-16 mr-6 largecontent"
prepend-inner-icon="mdi-magnify"
v-model="select"
:items="items"
item-text="name"
item-value="id"
:search-input.sync="search"
hide-no-data
label="Search anything (press /)"
>
<template #item="{ item }">
<v-list-item to="item.route">
<v-list-item-content>
<v-list-item-title v-text="item.name"/>
<div
v-if="item.desc"
v-html="item.desc"
/>
</v-list-item-content>
</v-list-item>
</template>
<v-autocomplete/>
Both of these options affect all v-autocomplete instances, not just the specific one I want to target:
<style>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
<style>
.v_menu__content {
max-height: 600px !important;
}
</style>
So, I'm considering scoping the style like this:
<style scoped>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
Alternatively, I could add a rule to my global CSS file:
.largecontent.v-autocomplete__content {
max-height: 600px !important;
}
However, none of these solutions seem to be working for me. I've also tried using Vuetify's deep selectors, but they only work within a parent-child hierarchy, which is not the case here.