vue.jsvuejs2vuetify.js

Reducing the height of Vuetify dropdown

I am not able to reduce the height of the Vuetify dropdown component v-select. I tried using the props dense but it only reduces the height of the options to select and doesn't show any effect on the closed dropdown.

I tried the following template code: 

<v-select :items="selectableYears" dense outlined></v-select>

The example code from the documenation is very similar: 

<v-select
    :items="items"
    label="Outlined style"
    dense
    outlined
></v-select>

Documentation: https://vuetifyjs.com/en/components/selects

Solution

  • It seems like that the dense props is only partially available with the Vuetify version I used (2.0.5). Upgrading the version to 2.1.0 reduces the height of the closed dropdown when using :dense="true" as a prop.