CSS スケール プロパティを使用すると、Vuetify の v メニュー ドロップダウンが間違った位置に表示される

Question

添付の図に示すように、CSS プロパティのスケールを使用すると、v メニューの位置が間違った位置になります。

対応するコードペン: https://codepen.io/satishvarada/pen/YzjGNVZ

v-autocomplete コンポーネントを使用する場合にも、同様の問題が発生します。

新しい Vue({
  el: '#app',
  vuetify: 新しい Vuetify()、
  データ: () => ({
    アイテム: [{
        タイトル：「クリックミー」
      }、
      {
        タイトル：「クリックミー」
      }、
      {
        タイトル：「クリックミー」
      }、
      {
        タイトル：「クリックミー2」
      }、
    ]、
  })、
})

html {
  ズーム: 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="アプリ">
  <v-app id="inspire">
    <div class="テキストセンター">
      <v-menu offset-y>
        <テンプレート v-slot:activator="{ on, attrs }">
          
            落ちる
          </v-btn>
        </テンプレート>
        <v-list>
          <v-list-item v-for="(アイテム, インデックス) アイテム内" :key="インデックス">
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-リストアイテム>
        </v-list>
      </v-メニュー>
    </div>
  </v-app>
</div>

Answer 1

1 つの方法は、left 属性を使用して、メニューが常に左側に表示されるようにすることです。

＃＃＃＃＃＃編集-＃＃＃＃＃＃

もう 1 つのアプローチは、attach プロパティを使用してメニューを親要素にアタッチすることです。これにより、コンポーネントはどの DOM 要素にデタッチすべきかを認識します。

これは 2 つのプロップを使用したデモです -

1.スケーリングプロパティ付き -

#新しい Vue({ el: '#app', vuetify: 新しい Vuetify()、 データ: () => ({ アイテム: [{ タイトル：「クリックミー」 }、 { タイトル：「クリックミー」 }、 { タイトル：「クリックミー」 }、 { タイトル：「クリックミー2」 }、 ]、 })、 })

html { ズーム: 40% }

[email protected]

/dist/vuetify.min.css" rel="stylesheet"/>

      
        
          
 左プロップの使用 
          
            
              

                落ちる
              

            
            
              
            
          
        
      
      
        
           アタッチプロップの使用 
          
            
              

                落ちる
              

            
            
              
            
          
        
      
    
  





2.スケーリング属性なし - 

#新しい Vue({ el: '#app', vuetify: 新しい Vuetify()、 データ: () => ({ アイテム: [{ タイトル：「クリックミー」 }、 { タイトル：「クリックミー」 }、 { タイトル：「クリックミー」 }、 { タイトル：「クリックミー2」 }、 ]、 })、 })

[email protected]

/dist/vuetify.min.css" rel="stylesheet"/>

        
           左プロップの使用 


            
            
              
                {{ item.title }}
              
            
          
        
      
      
        

          
 アタッチプロップの使用 
          
            
            
              
                {{ item.title }}