CODEWITHSUNDEEP
vue.jsvuetify.js
w3bsite
w3bsite

Reputation: 413

How can I add custom margin to the v-list element under v-menu in vuetify

there is another container that is being add by vuetify to the v-list Im trying to use as v-menu content,because of this container I can't just add a margin to my v-list and get the result I want (that is having a little space between the v-menu activator and menu body) can any one show me the right way to do this? thank you

Upvotes: 1

Views: 1401

Answers (3)

Sarbe85
Sarbe85

Reputation: 11

content-class="menu-content" - this is the answer.

Upvotes: 1

Justin Bashombana
Justin Bashombana

Reputation: 181

Simply add nudge bottom in v-menu

<v-menu nudge-bottom='3'></v-menu>

or add padding in the v-menu activator element

<template v-slot:activator="{on}"><span class='pa-2' v-on="on">some text</span></template>

Upvotes: 1

w3bsite
w3bsite

Reputation: 413

I found out about a prop that can be used to attach any css class to the body of the menu : 'content-class'

<template>
  <div>
    <v-menu v-model="menu"
            content-class="menu-content"
            offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs"
               v-on="on" depressed>
          <v-icon>
            mdi-menu
          </v-icon>
          <span class="mr-1"> Category</span>
          <v-icon
            right
            color="#9b9b9b"
          >
            mdi-chevron-down
          </v-icon>
        </v-btn>
      </template>
            <v-list>
    <v-list-item
      v-for="(item, i) in menuArray"
      :key="i"
    >
      <v-list-item-title>{{ item.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
    </v-menu>
</template>
<style lang='scss' scoped>
.menu-content {
  margin-top: 100px
}
</style>

Upvotes: 1

Related Questions