CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Tom
Tom

Reputation: 5994

How to position the VuetifyJS popover component?

I'm using VueJS with the VuetifyJS material design components. How to position the Vuetify popover component 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>

Upvotes: 2

Views: 20087

Answers (1)

Tom
Tom

Reputation: 5994

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.com/en/components/menus

Upvotes: 3

Related Questions