Reducing the height of Vuetify dropdown

user_6080017 0
Viewed 5011

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

vuejs2 vuetify.js vue.js
2 Answers

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.

user_60800170

In order to adjust the Vuetify dropdown height, you must use the height API. As follow: 

<v-select
  :items="items"
  label="Standard"
  height="300px" // Height API
></v-select>

If you want to reduce it to lesser than the default, try to write css class for .v-text-field.v-text-field--solo .v-input__control, which is the wrapper of v-select. 

.v-text-field.v-text-field--solo .v-input__control{
    min-height: 30px;
}

Example: https://codepen.io/fsaadatpei/pen/XWrvEGR

user_25565150
Related