vuetify.jsv-select

v-select set number of items shown in dropdown Vuetify

I have the following v-select:

Weekday v-select

It has 7 items (for each weekday) but I want it to show all 7 when it's opened, not only the first 6 with a scrollbar. I can't seem to find an v-select API option for that. I searched on the Vuetify page and on several StackOverflow questions.

How can I do that and if I missed something: What should I have been searching for?

Thanks!

Solution

  • You can unset max-height, so that the dialog is not limited.

    It's a property on the underlying v-menu, you pass it using :menu-props:

    <v-select
  :menu-props="{maxHeight: 'unset'}"
  ...

    Here is a snippet (you need to expand it to see it in full height though):

    const {
  createApp,
  ref
} = Vue;
const {
  createVuetify
} = Vuetify
createApp({}).use(createVuetify()).mount('#app')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" />
<div id="app">
  <v-app>
    <div>
      <v-select
        label="Weekday" 
        :items="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
        :menu-props="{maxHeight: 'unset'}"
      ></v-select>
    </div>
  </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.6/dist/vuetify.min.js"></script>

    It should work the same using Vuetify for Vue 2, its :menu-props is actually documented a bit better.

    Does that work for you?