CODEWITHSUNDEEP
vuejs2vuetify.js
user3376642
user3376642

Reputation: 527

Vuetify Dropdown List not working properly

I add a dropdown list to my project using the Vuetify example and this happens

The list is at the bottom of my page, I'm guessing is the CSS but is kinda confusing try to figure out which part.

Code

<v-container>
  <v-layout wrap align-center id="new">
          <v-flex xs12 sm6 d-flex>
            <v-select :items="items"
                      label="Standard"></v-select>
          </v-flex>
  </v-layout>
</v-container>

Script

data: () => ({
  items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),

Upvotes: 0

Views: 3220

Answers (2)

Tim Hall
Tim Hall

Reputation: 1450

Similar artifacts can be caused by relative position parents, i figured out part of the fix, just don't know how to integrate it yet.

This is the github bug report for that issue https://github.com/vuetifyjs/vuetify/issues/9933

Upvotes: 0

Dylan Zgorski Dykes
Dylan Zgorski Dykes

Reputation: 151

You have to wrap you're app in the v-app tag for things to operate properly when using Vuetify. In this case wrap the v-container with v-app tag and your select will display properly. More about v-app here.

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

Upvotes: 5

Related Questions