Vuetify v-navigation-drawer cannot overflow button

Question

I have a v-navigation-drawer and it's design must include a toggle expand button that overflows the drawer itself like so:

But for some unknown reason, I can't remove the overflow hidden property.

I tried to remove it like this:

    .v-navigation-drawer {
      overflow: auto;

      .v-navigation-drawer__content {
        overflow-x: auto;
      }
    }

No success:

Here the codepend reproducing the issue: https://codepen.io/aug-riedinger/pen/poLjJyq

Can anyone help on this?

Thanks

score 3 · Accepted Answer · answered Jul 07 '22 at 15:55

3

Just as kael said, you need to set the overflow property to visible for normal and mini variant. Like this:

.v-navigation-drawer--mini-variant, .v-navigation-drawer {
  overflow: visible !important;
  
}

.expand-toggle {
  position: absolute;
  height: 3rem;
  z-index: 1;
  right: -14px;
  top: 30px;
  bottom: 0;
  .v-btn {
    margin: auto;
    border: thin solid white !important;
  }
}

answered Jul 07 '22 at 15:55

cmfc31

1,385
2
8
9

I did try with `overflow-x: visible;` and it did not work but `overflow: visible` does! Not clear why but thanks! – Augustin Riedinger Jul 07 '22 at 20:42
That's because internally the navigation drawer component has the css property `overflow` set to hidden. And that's the one you need to override. – cmfc31 Jul 08 '22 at 15:23

score 2 · Answer 2 · answered Jul 07 '22 at 15:39

2

https://stackoverflow.com/a/6433475/2074736

You want visible not auto, and you also have to set overflow-y: visible for that to actually take effect.

answered Jul 07 '22 at 15:39

Kael Watts-Deuchar

4,213
1
26
50

Vuetify v-navigation-drawer cannot overflow button

2 Answers2