Question 179204 in CSS Question posted in
Some basic documentation can be found here.

Does Vuetify Drawer tabs have an overflow/z-index issue?

I am trying to implement a sidebar expandable menu with Vuetify2 as shown in the docs, however after hours of struggling and trying different suggested in the docs options couldn’t find a way to make the expanded menu overflow and appear above all other items.

Current behavior pushes everything away and causes it to flip on the next row and it would be definitely preferable expansion of the sidebar not to mess up the page elements.

Below is the drawer component’s template:

    <v-card>
      <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      >
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
            </v-list-item-avatar>
            <v-spacer></v-spacer>
            <v-btn
              icon
              @click.stop="mini = !mini"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
          </v-list-item>

          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="text-h6">
                {{ $auth.user?.name }}
              </v-list-item-title>
              <v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

And parent components template:

    <v-app>
     <div class="row">
       <navbar @change-tab="changeTab" :items="items">
       </navbar>
       <div class="container">
         <other custom components>
       </div>
     </div>
    <v-app>

I have tried overriding z-index and overflow (y/x/and both) on .v-navigation-drawer. Also experimented the same way with the wrapping v-card but still no joy.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you very much @Moritz Ringler for your detailed answer and useful hints! I haven't delved into the details yet to examine v2-v3 behavior and experiment. However in the meantime I managed to find a workaround and this might help someone who attempts to manually control the arrangement. Here's what I was missing: I totally forgot that z-index works with position:absolute so I devised this css class:

    .front {
  position: absolute;
  z-index: 9 !important;
  overflow: visible !important;
}

    and finally wrapped the nav-bar component in it:

           <div class="front">
         <profile-nav @change-tab="changeTab" :items="items">
         </profile-nav>
       </div>

  2. 0

    It looks like you are trying to layout the navbar yourself by putting it into the div with the "row" class. But for top-level app components like the navigation drawer, Vuetify does this for you. So it should be just:

    <v-app>
  <navbar @change-tab="changeTab" :items="items"></navbar>
  <v-main>
    ...
  </v-main>
<v-app>

    The documentation in v2 is pretty sparse ("More to follow"), but it might help to look at the documentation for v3 – while it does not behave the same, it might give you an idea how it works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search