Reduce dropdown's width VUEJS2-CodePudding

I have a v-navigation-drawer and a dropdown menu inside it. I'd like them both to have the same width whether the dropdown's up or down. At the moment, the dropdown is going outside the drawer when I open it. Does anyone know how to reduce a dropdown's width ?

<v-navigation-drawer
  
  height="98vh"
  width="360px"
  dark
  right
  v-model="drawerSettings"
  absolute
  temporary
>
  <template>
    <v-container fluid>
      <v-select
        v-model="valuesType"
        :items="typeArray"
        label="Relationship"
        multiple
      >
        <template v-slot:prepend-item>
          <v-list-item
            ripple
            @mousedown.prevent
            @click="toggleType"
            
          >
            <v-list-item-action>
              <v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
                {{ iconType }}
              </v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                Select All
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-divider ></v-divider>
        </template>
      </v-select>
    </v-container>
  </template>
</v-navigation-drawer>

CodePudding user response：

First, remove the <v-container fluid> because it's taking padding, then use prop attach with v-select> , it specifies which DOM element that this component should detach to

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    drawerSettings: true,
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    selectedItem: [],
  }),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8 M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <div id="app">
  <v-app id="inspire">
    <v-card>
      <v-navigation-drawer
        
        height="98vh"
        width="360px"
        dark
        right
        v-model="selectedItem"
        absolute
        temporary
        >
  
      <v-select
        v-model="selectedFruits"
        :items="items"
        label="Favorite Fruits"
        multiple
        attach
      >
      </v-select>
 
  </v-navigation-drawer>
    </v-card>
        </v-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>