I'm using VueJS with the VuetifyJS material design ponents. How to position the Vuetify popover ponent below the MORE button? (Currently it's positioned on the upper left, I guess it's the fall back x=0, y=0.)

Button:

<button @click.prevent="openPopover">MORE</button>

Popover Vuetify template:

 <template>
  <div class="text-xs-center">
    <v-menu
      offset-x
      :close-on-content-click="false"
      :nudge-width="200"
      v-model="menu"
    >
      <v-btn color="indigo" dark slot="activator">Menu as Popover</v-btn>
      <v-card>
        <v-list>
            <v-list-tile-action>
              <v-btn
                icon
                :class="fav ? 'red--text' : ''"
                @click="fav = !fav"
              >
                <v-icon>favorite</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
    </v-menu>
  </div>
</template>

JS:

    <script>
  export default {
    data: () => ({
      fav: true,
      menu: false,
      message: false,
      hints: true
    })
  }
</script>

I'm using VueJS with the VuetifyJS material design ponents. How to position the Vuetify popover ponent below the MORE button? (Currently it's positioned on the upper left, I guess it's the fall back x=0, y=0.)

Button:

<button @click.prevent="openPopover">MORE</button>

Popover Vuetify template:

 <template>
  <div class="text-xs-center">
    <v-menu
      offset-x
      :close-on-content-click="false"
      :nudge-width="200"
      v-model="menu"
    >
      <v-btn color="indigo" dark slot="activator">Menu as Popover</v-btn>
      <v-card>
        <v-list>
            <v-list-tile-action>
              <v-btn
                icon
                :class="fav ? 'red--text' : ''"
                @click="fav = !fav"
              >
                <v-icon>favorite</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
    </v-menu>
  </div>
</template>

JS:

    <script>
  export default {
    data: () => ({
      fav: true,
      menu: false,
      message: false,
      hints: true
    })
  }
</script>

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Apr 5, 2018 at 10:30 TomTom 6,0342121 gold badges8585 silver badges134134 bronze badges 5

• 2 offset-y instead of offset-x? – Traxo Commented Apr 5, 2018 at 10:36
• @Traxo Just tried it, didn't work unfortunately. Still x0,y0 – Tom Commented Apr 5, 2018 at 17:15
• Try adding bottom attribute as well maybe? Could you reproduce it on codepen perhaps? – Traxo Commented Apr 5, 2018 at 19:26
• Great idea, here it is: codepen.io/anon/pen/WzaRbd?&editors=101 - I think the problem is that I need to have the activator button outside of the <v-menu> - This part is it: <v-btn color="indigo" dark slot="activator">CUSTOM MENU as Popover</v-btn> – Tom Commented Apr 5, 2018 at 19:55
• 1 I think you are correct, that might be a problem. However I'm not sure if that's supported. From docs: Remember to put the element that activates the menu in the activator slot.. So I believe that anything you do to make it work would be a workaround? Perhaps someone else can confirm. (one of the v-menu props is activator which indicates that it's possible, but seems not to be working as described) – Traxo Commented Apr 6, 2018 at 2:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I fixed the problem by putting the popover code in a drop down menu. There are also a couple of options in the API to position the content of the menu.

Examples and API: https://vuetifyjs./en/ponents/menus