search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.73k stars 6.95k forks source link

[Bug Report][3.6.6] v-tabs in Fullscreen v-dialog Get Displaced When v-tabs-window-item Content Causes Scroll #19859

Open SOONwasTaken opened 4 months ago

SOONwasTaken commented 4 months ago

Environment

Vuetify Version: 3.6.6 Vue Version: 3.4.15 Browsers: Chrome 124.0.0.0 OS: Windows 10

Steps to reproduce

Use v-tabs inside of a fullscreen v-dialog. Create some content inside of a v-tabs-window-item that is large enough to cause the v-dialog to begin scrolling.

When in the demo. Open the v-dialog with the "Open Modal" button. Switch from Small Tab to Big Tab and view the results.

Expected Behavior

I expect the v-tabs bar to stay at the top of the v-dialog.

Actual Behavior

v-tabs bar is displaced and causes the tabs to become unusable until the v-dialog is closed and reopened.

Reproduction Link

Playground Link

Other comments

There is a Promise returned that simulates an asynchronous content load. This is similar to what we have in our current application. However, the issue also occurs when using :eager="true". This can be simulated by setting the fakeAsyncLoader to true as its initial value.

SOONwasTaken commented 4 months ago

It should be known that I was using v-card as my v-dialog body content. That is because it is per the example I saw in the documentation, but this behavior prevents that for my use case.

I was able to find a workaround by using v-sheet Playground Link