CODEWITHSUNDEEP
javascripthtmlcssvuejs2vuetify.js
SatishV
SatishV

Reputation: 443

Vuetify v-menu dropdown is shown at incorrect location while using css zoom property

enter image description here

As shown in attached picture, v-menu position is at incorrect location while using zoom css property.

Corresponding codepen : https://codepen.io/satishvarada/pen/YzjGNVZ

Similar issues wile using v-autocomplete component too.

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>

Upvotes: 1

Views: 960

Answers (1)

Neha Soni
Neha Soni

Reputation: 4704

One way would be to use the left prop, so the menu will always be on the left side.

EDIT-

Another way would be to attach the menu to its parent element using attach prop, so the component would know which DOM element it should detach to.

Here is the demo with both props-

1. With zoom property-

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">
    <v-row>
      <v-col>
        <div class="text-center">
          <div class="mb-2"> Using left prop </div>
          <v-menu offset-y :left="true">
            <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-col>
      <v-col>
        <div class="text-center" id="parent">
          <div class="mb-2"> Using attach prop </div>
          <v-menu offset-y attach="#parent">
            <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-col>
    </v-row>
  </v-app>
</div>

2. Without zoom property-

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me'
      },
      {
        title: 'Click Me 2'
      },
    ],
  }),
})
<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">
    <v-row>
      <v-col>
        <div class="text-center">
          <div class="mb-2"> Using left prop </div>
          <v-menu offset-y :left="true">
            <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-col>
      <v-col>
        <div class="text-center" id="parent">
          <div class="mb-2"> Using attach prop </div>
          <v-menu offset-y attach="#parent">
            <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-col>
    </v-row>
  </v-app>
</div>

Upvotes: 1

Related Questions