CODEWITHSUNDEEP
vue.jsvuetify.js
coyotte508
coyotte508

Reputation: 9695

Vuetify: Specifying the height of list items in v-autocomplete

I'm using a v-autocomplete with a custom slot to display results:

<v-autocomplete :items=searchResults :loading=loading :search-input.sync="query" hide-no-data label="Entreprise, SIREN..." append-icon="search" v-model="selected" three-line >
  <template v-slot:item="{ item }">
    <v-list-tile-content>
      <v-list-tile-title v-text="item.text"></v-list-tile-title>
      <v-list-tile-sub-title v-text="item.value"></v-list-tile-sub-title>
      >
      <v-list-tile-sub-title> Third line of list item</v-list-tile-sub-title>
    </v-list-tile-content>
    <CompanyListItem :company=item :loading=false />
  </template>
</v-autocomplete>

Unfortunately the resulting list items appear compressed vertically, as seen in this codepen.

Is it possible to add two-line or three-line to the underlying list to be able to have 'taller' list items? Adding those properties to the <v-autocomplete> doesn't work.

Upvotes: 0

Views: 7519

Answers (1)

sml-sgr
sml-sgr

Reputation: 912

Changing the height of list tile to auto as CSS property worked for me .

.v-autocomplete__content .v-list__tile{
  height: auto;
}

two-line or three-line are props of <v-list></v-list> to increase list-tile height.But here the contents of v-slot:item are by default wrapped in <v-list></v-list> (when i inspect the element in browser inspector).

Upvotes: 2

Related Questions