'v-menu background become transparent and overlay navbar Vuetify

I am making a Facebook's notification component using v-menu & v-list.

I set height of v-list to 300px because if not, the list will stretch height to show all content.

When I scroll on component, the background became transparent. Also, v-list overlay content on navbar too.

How can I fixed it?

Code demo

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <v-btn icon v-bind="attrs" v-on="on">
      <v-badge :content="messages" :value="messages" color="green" overlap light>
        <v-icon>mdi-bell</v-icon>
      </v-badge>
    </v-btn>
  </template>

  <v-list three-line height="300px" width="500px">
    <template v-for="(item, index) in items">
      <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader>

      <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>

      <v-list-item v-else :key="item.title">
        <v-list-item-avatar>
          <v-img :src="item.avatar"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title v-html="item.title"></v-list-item-title>
          <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </template>
  </v-list>
</v-menu>
cssvue.jsvuetify.js


Solution 1:[1]

The simplest solution is to set overflow-y: auto to your v-list:

<v-list style="overflow-y: auto" three-line height="300px" width="500px">

Solution 2:[2]

In my case, adding max-height on the menu works for me.

See this github issue for more details: https://github.com/vuetifyjs/vuetify/issues/3202

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 Lars
Solution 2 Gary Yang

Related Questions