Vuetify: [Bug Report] Tabs overlapping fab

[NikoNagy]

Versions and Environment

Vuetify: 1.0.16
Vue: 2.5.16
Browsers: Chrome 65.0.3325.181
OS: Windows 10

Steps to reproduce

Just watch the fab on the left. It's overlapped by the tabs. Even with z-index: 9999

Expected Behavior

Fab is above tab. (Or a workaround to do this)

Actual Behavior

Tabs are above fab. Even when playing with z-index.

Reproduction Link

https://codepen.io/anon/pen/ELPmmj

[praveenpuglia]

So this is happening is because the .tabs_items div that wraps all the tab contents has an overflow: hidden set to it.

Not sure why it was done so not sure what it may break.

For now, you can set use the following as workaround.

Somewhere in your global css, add this

.tabs__items {
  overflow: visible;
}

[KaelWD]

what it may break

It's hidden so the tab transition doesn't overflow.

[praveenpuglia]

I can't see a difference after removing the overflow. Any example where it's clearly visible?

[KaelWD]

https://vuetifyjs.com/en/components/tabs

Remove the overflow on .tabs__items and .component-example .application--example with devtools

[praveenpuglia]

Ah! I see! That's bad. Thanks! Thinking how we solve this without having to remove overflow: hidden from .tabs__items

[NikoNagy]

With v1.1, workaround provided by @praveenpuglia becomes :

.v-tabs__items {
  overflow: visible;
}

[praveenpuglia]

I just checked this and it seems to be fixed with the latest vuetify. Closing this. Feel free to open if you see the issue pop up again.