[Bug Report] v-menu auto property doesn't properly center the menu items relative to the activator

Versions and Environment

Vuetify: 1.5.5 Vue: 2.6.8 Browsers: Chrome 70.0.3538.77 OS: Linux x86_64

Steps to reproduce

Create a v-menu with a button as an activator and put the auto prop on v-menu.

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <v-menu
        v-model="menu"
        :close-on-content-click="false"
        auto
        offset-y
      >
        <template v-slot:activator="{ on }">
          <v-btn
            color="indigo"
            dark
            v-on="on"
          >
            Menu as Popover
          </v-btn>
        </template>
  
        <v-card>
          <v-list>
            <v-list-tile avatar>
              <v-list-tile-avatar>
                <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
              </v-list-tile-avatar>
  
              <v-list-tile-content>
                <v-list-tile-title>John Leider</v-list-tile-title>
                <v-list-tile-sub-title>Founder of Vuetify.js</v-list-tile-sub-title>
              </v-list-tile-content>
  
              <v-list-tile-action>
                <v-btn
                  :class="fav ? 'red--text' : ''"
                  icon
                  @click="fav = !fav"
                >
                  <v-icon>favorite</v-icon>
                </v-btn>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
  
          <v-divider></v-divider>
  
          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <v-switch v-model="message" color="purple"></v-switch>
              </v-list-tile-action>
              <v-list-tile-title>Enable messages</v-list-tile-title>
            </v-list-tile>
  
            <v-list-tile>
              <v-list-tile-action>
                <v-switch v-model="hints" color="purple"></v-switch>
              </v-list-tile-action>
              <v-list-tile-title>Enable hints</v-list-tile-title>
            </v-list-tile>
          </v-list>
  
          <v-card-actions>
            <v-spacer></v-spacer>
  
            <v-btn flat @click="menu = false">Cancel</v-btn>
            <v-btn color="primary" flat @click="menu = false">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </div>
  </v-app>
</div>

Expected Behavior

In the docs it says that if you put auto prop on v-menu it will center the menu items. It should center the v-card relative to the button but it is not centered.

Actual Behavior

The v-menu item has a strange offset to the left but not fully centered.

Reproduction Link

https://codepen.io/anon/pen/aMJOaY?&editable=true&editors=101

[martinszeltins]

@jacekkarczmarczyk How would solve centering a v-menu under its activator? @martinszeltins Have you found a solution to the problem?

No, I haven’t found a solution yet.

[talski]

If your activator and v-menu have fixed widths, it can be accomplished by setting nudge-left property:

nudge-left = (vMenuWidth - activatorWidth)/2

Example:

https://codepen.io/talski/pen/zYoojGZ?editors=1010