vuejs3vuetify.jsv-selectvuetifyjs3

How to decrease list height in v-select vuetify3

I can't decrease list height... list height becomes full screen height

I tried a lot of ways, but nothing happened

Solution

  • That is weird, as per default, the (max-)height is set to 310px (see source).

    But you can change the height by passing a configuration object to the underlying v-menu through the :menu-props prop. You have to adjust the :max-height:

    <v-select
  :menu-props="{
    'max-height': 310
   }"
/>


    const { createApp, ref, computed} = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const items = Array.from({length: 100}, (_,i) => `Options ${i+1}`)
    const maxHeightNumber = ref(0)
    const maxHeight = computed(() => maxHeightNumber.value  > 0 ? maxHeightNumber.value + 'px' : 'auto')
    
    return { items, maxHeight, maxHeightNumber}
  }

}
createApp(app).use(vuetify).mount('#app')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <div>
      <v-select
        :items="items"
        label="Options Options Options"
        :menu-props="{
          'max-height': maxHeight
        }"
      />
      </div><div>
      <v-text-field :label="'max height (' + maxHeight + ')'" type="number" step="100" v-model="maxHeightNumber"></v-text-field>
      </div>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>