Vuetify 3 Specify heigh and text size of list items in autocomplete/select

Question

I think that the list items in the select/autocomplete are taking up way too much space. I can't figure out the css classes used for the list items. Ideally I would set this in a global css...

Has anyone figured out how to achieve more "compact looking" listitems in the select/autocomplete?

Answer 1

First, see if you prefer the look when just changing props.

<v-autocomplete
  :items="items"
  :item-props="itemProps"
></v-autocomplete>

function itemProps(item) {
  return {
    density: 'compact' // 'default' | 'comfortable' | 'compact'
  }
}

For more exact control, the quickest way to change the height and font size would be to target these two classes:

.v-list-item {
  min-height: 10px !important;
}
.v-list-item-title {
  font-size: 1.5rem !important;
}

Since these are actually targeting v-list classes, the above CSS will affect not just v-autocomplete but any other v-list, v-menu, v-select, etc. To target just autocompletes, you need to add a class to the dropdown overlay that you can then add to the CSS selector

<v-autocomplete
  :items="items"
  :menu-props="{
    contentClass: 'autocomplete-overlay'
  }"
></v-autocomplete>

.autocomplete-overlay .v-list-item {
  min-height: 10px !important;
}
.autocomplete-overlay .v-list-item-title {
  font-size: 1.5rem !important;
}