Menu lungsur Vuetify v-menu dipaparkan dalam kedudukan yang salah apabila menggunakan sifat skala css

Question

Seperti yang ditunjukkan dalam gambar yang dilampirkan, kedudukan menu v berada di tempat yang salah apabila menggunakan sifat CSS skala.

Pen kod yang sepadan: https://codepen.io/satishvarada/pen/YzjGNVZ

Masalah yang sama juga akan berlaku apabila menggunakan komponen v-autocomplete.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me 2'
      },
    ],
  }),
})

html {
  zoom: 40%
}

<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Dropdown
          </v-btn>
        </template>
        <v-list>
          <v-list-item v-for="(item, index) in items" :key="index">
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Answer 1

Salah satu cara ialah menggunakan atribut left supaya menu akan sentiasa berada di sebelah kiri.

Edit-

Pendekatan lain ialah melampirkan menu pada elemen induknya menggunakan attach prop, jadi komponen itu mengetahui elemen DOM yang mana ia harus ditanggalkan.

Ini ialah demo dengan dua prop-

1. Mempunyai atribut zum-

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me 2'
      },
    ],
  }),
})

html {
  zoom: 40%
}

[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
sssccc
sssccc
sssccc

  
    
      
        

          
 Using left prop 
          
            
            
              
                {{ item.title }}
              
            
          
        
      
      
        

          
 Using attach prop 
          
            
            
              
                {{ item.title }}
              
            
          
        
      
    
  

2. Tiada atribut zum -

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me 2'
      },
    ],
  }),
})

[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
sssccc
sssccc
sssccc

  
    
      
        

          
 Using left prop 
          
            
            
              
                {{ item.title }}
              
            
          
        
      
      
        

          
 Using attach prop 
          
            
            
              
                {{ item.title }}