Customize v-select dropdown position

user_12763413 0
Viewed 14313

I am using vuetify v-select component. The issue I am facing is instead of opening the dropdown downwards, I want it to open upwards because the dropdown is at the bottom of the page so some of the dropdown items don't appear. Like in the picture below there are multiple options are Nunavut which don't appear. Please help me resolve this issue.

<v-layout row wrap>
 <v-flex md6 xs12>
  <v-select
   :items="states"
   :closeOnSelect="true"
   multiple
   attach
   item-text='name'
   item-value='id'
  ></v-select>
 </v-flex>
</v-layout>
vuetify.js vue.js css
3 Answers

You can use menu-props see docs

<v-select
 :items="states"
 :closeOnSelect="true"
 multiple
 attach
 :menu-props="{ top: true, offsetY: true }"
 item-text='name'
 item-value='id'
></v-select>
user_34623190

This is how I solved this problem by adding auto

<v-layout row wrap>
 <v-flex md6 xs12>
  <v-select
   :items="states"
   :closeOnSelect="true"
   multiple
   attach
   item-text='name'
   item-value='id'
   auto
  ></v-select>
 </v-flex>
</v-layout>
user_127634130

Another way of doing this is by setting menu-props to auto:

<v-select
     :items="states"
     :closeOnSelect="true"
     multiple
     attach
     :menu-props="auto"
     item-text='name'
     item-value='id'
    ></v-select>
user_51235240
Related