Vuetify: [Bug] v-dialog with tabs hides the tabs slider until you click any of the tabs

Created on 1 Oct 2017 · 9Comments · Source: vuetifyjs/vuetify

Steps to reproduce

Create a v-dialog with tabs inside
Open the dialog

Versions

0.15.7

What is expected ?

The tabs slider showing on the active tab.

What is actually happening ?

The tabs slider is hidden until you click on any tab.

Reproduction Link

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

wontfix

Source

anthonysan95

Most helpful comment

This is unfortunately part of how v-tabs works, it needs to know its dimensions to calculate the bar position. You can manually do this, or you can just add the lazy prop to your v-dialog.

https://codepen.io/johnjleider/pen/gGxGBZ

johnleider on 1 Oct 2017

👍11 🎉2

All 9 comments

This is unfortunately part of how v-tabs works, it needs to know its dimensions to calculate the bar position. You can manually do this, or you can just add the lazy prop to your v-dialog.

https://codepen.io/johnjleider/pen/gGxGBZ

johnleider on 1 Oct 2017

👍11 🎉2

@johnleider How do I know when the dialog is ready when using lazy? I have soem properties inside the dialog and I get errors now. Without lazy it works fine

BennyAlex on 18 May 2018

The issue list of this repo is exclusively for bug reports and feature requests. For general questions, please join the Discord chat room. You can also check reddit or stackoverflow. Do not forget to create a reproduction that shows your problem

jacekkarczmarczyk on 18 May 2018

👎1

This is an annoying bug.

Have you considered something like this instead of the window resize event for example? I made a quick test adding that on the resize directive and it fixes this.

Im not sure how it might affect the rest of the codebase, but they even claim that it performs better than the window resize event that is used currently on the resize directive, so it might improve the whole vuetify performance!

@johnleider

mrodal on 30 Jan 2019

👍4

@mrodal i agree

simonmaass on 27 Feb 2019

any news here if this will be refactored?

simonmaass on 30 Jul 2019

hello, I confirm that using "lazy" attribute it works,
here is our app https://app.mappd.io

thomas-topway-it on 15 Oct 2019

👎3

Hello, if anyone have this issue outside a dialog, just wrap with "v-lazy" component. As it's described in docs, they will render when needed.

MTakashiMori on 20 Aug 2020

This may not be your case,
but in my case, binding and solved this issue.
(using the same v-mode attribute which is defined 'null' in Vue object's data bracket )