How to set fixed width on v-autocomplete component list?

[Acenollari]

If your <v-autocomplete> component looks like the one below, and you want to set a fixed width for the dropdown list, you should add the following props:

<v-autocomplete
density=”compact”
v-model=”input.itemObjAfter”
item-title=”itemNameCode”
item-value=”item_id”
:items=”itemCopy”
hide-details
return-object
label=”Artikulli behet”
variant=”outlined”
></v-autocomplete>

:menu-props=”{ maxWidth: 0 }” — This forces the dropdown menu to match the width of the input field.
:item-props=”{ density: ‘compact’ }” — This ensures the dropdown items have a compact layout.

Here is an example with these props included:

<v-autocomplete
density=”compact”
v-model=”input.itemObjAfter”
item-title=”itemNameCode”
item-value=”item_id”
:items=”itemCopy”
hide-details
return-object
label=”Artikulli behet”
variant=”outlined”
:menu-props=”{ maxWidth: 0 }”
:item-props=”{ density: ‘compact’ }”
></v-autocomplete>

This configuration will keep the dropdown list aligned and consistent in width with the input field.

[Author]

Posts