CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
Ckuessner
Ckuessner

Reputation: 731

Make v-menu Title stay fixed on top

So I am trying to do a Notification component in my VueJS App, but I'm struggling to get the header of a menu that opens on click fixed.

Here is the code of the component:

<template>
 <v-menu
  max-width="400px"
  max-height="300px"
  allow-overflow
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>

  <v-card>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title style="position:fixed;" class="text-center"
            >This Should Be Fixed</v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
    </v-list>
    <v-btn text @click="menu = false">Cancel</v-btn>
    <v-btn color="primary" text @click="menu = false">Save</v-btn>
  </v-card>
</v-menu>

I have tried the <v-app-bar fixed>Title</v-app-bar> , which doesn't work either. Does anyone have an idea what causes that?

Upvotes: 3

Views: 4572

Answers (2)

Konstantin Vertinskiy
Konstantin Vertinskiy

Reputation: 103

It will be better to use max-height in style prop. So your list can have variable height:

    <v-card-text style="max-height: 260px;" class="overflow-y-auto"> <!--THIS IS IMPORTANT!-->
      <v-list>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
      </v-list>
    </v-card-text>

Upvotes: 1

morphatic
morphatic

Reputation: 7975

The trick is to use a v-card for the content of your menu, and set a fixed height and overflow-y: scroll on the content:

<v-menu
  max-width="400px"
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>
  <v-card scrollable>
    <v-card-title>
      This Should Be Fixed
    </v-card-title>
    <v-card-text style="height: 280px; overflow-y: scroll"> <!--THIS IS IMPORTANT!-->
      <v-list>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-btn text @click="menu = false">Cancel</v-btn>
      <v-btn color="primary" text @click="menu = false">Save</v-btn>
    </v-card-actions>
  </v-card>
</v-menu>

Here's a codepen with a working demo.

Upvotes: 5

Related Questions