'Vuetify open drop down menu center to button
I have a drop down menu with two rows of v-list items as shown below.
<v-menu
class="dropdown"
open-on-hover
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="rounded-xl green darken-3 text-capitalize elevation-2 ml-2"
dark
v-bind="attrs"
v-on="on"
>
The Society
</v-btn>
</template>
<v-list class="pa-6">
<v-list-item>
<v-row>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item><v-btn class="ml-n6" text>Our Constitution <v-icon class="ml-3">mdi-security</v-icon></v-btn></v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
<v-divider vertical></v-divider>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
</v-row>
</v-list-item>
</v-list>
</v-menu>
I need this menu to open centre to the The Society button and not pushing to the right as it does presently. So the middle line of the drop down should be centre to the The Society button.
Solution 1:[1]
So it seems that there is a nudge-left api available for v-menu's. Thank you Vuetify for this amazing framework!
My Code
<v-menu
open-on-hover
nudge-left="220"
nudge-bottom="50"
>
This looks like it solved my issue.
Find the API here https://vuetifyjs.com/en/api/v-menu/#props
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | John'Sters |

