How to set (override) the height of a Vuetify v-autocomplete listbox (results area) using CSS?-CodePudding

I'd like to increase the height of the Vuetify v-autocomplete, which is fixed at 304px (might be a calculated value, YMMV).

<v-autocomplete
    
    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/>

These both work, but would apply the style to ALL v-autocomplete, which we don't want:

<style>
    .v-autocomplete__content {
        max-height: 600px !important;
    }
</style>

<style>
    .v_menu__content {
        max-height: 600px !important;
    }
</style>

So, I'd like to either scope it

<style scoped>
    .v-autocomplete__content {
        max-height: 600px !important;
    }
</style>

Or add an entry to my global css file, something like:

.largecontent.v-autocomplete__content  {
  max-height: 600px !important;
}

But nothing seem to work, also tried the Vuetify deep selectors, but they seem to only work when there's a parent-child hierarchy, which is not the case here.

CodePudding user response：

There is a menu-props property, that you can pass to v-autocomplete in order to customize its dropdown menu (including max-height).

<v-autocomplete :menu-props="{ maxHeight: 500 }">...

CodePudding user response：

Did you tried put the lang=scss and use ::v-deep? Maybe "deep" helps you to change the style in the way you want