vuetify v-select styling : too big

Question

Is it possible to reduce the height of the v-select in Vuetify ? I don't understand why this elements are so big / fat...

---

My code is :

<template>
  <div>
    <v-select
      outline
      dense
      v-model="filtresActivites"
      :items="activitesGroupees"
      item-text="activiteNomComplet"
      item-value="activiteCode"
      multiple
    >
      <template v-slot:selection="{ item, index }">
        <span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
      </template>
    </v-select>
  </div>
</template>

"You can add height property to your v-select like this:" : it dosn't work

I added .v-select__selections { min-height: 30px } in the style of the component and it dosn't work.

Solution

You can add height property to your v-select like this:

<v-select
 :items="items"
 height=50
></v-select>

If you want to change the css property of v-select, you can do so by adding this class

.v-select__selections {
     min-height: 30px
}

The min-height is 42px by default

It is also hard to understand your problem when we cannot see your code

Comments

[DjSh]

Make sure to add the styles in App.vue. Otherwise it will get overwritten by the default styles. I tried your code in Codepen and height=50 changed the height of v-select. Using solo property would also decrease the height. Another thing that would help is you can inspect the element and see which class is adding the height. copy the class name and change the height globally(i.e in App.vue)