search

vuetifyjs / vuetify

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

[Bug Report][3.7.0-beta.1] Vertical VTab window content should appear next to tabs akin to Vuetify 2 #20294

Open thezboe opened 2 months ago

thezboe commented 2 months ago

Environment

Vuetify Version: 3.7.0-beta.1 Vue Version: 3.4.36 Browsers: Firefox 128.0, Google Chrome OS: Linux, Windows 10

Steps to reproduce

Reproduction link shows issue immediately

Expected Behavior

Vuetify 2 vertical tabs show their content directly next to the tabs which looks functionally correct (https://v2.vuetifyjs.com/en/components/tabs/#vertical-tabs).

Actual Behavior

Vuetify 3 vertical tabs show their content below the vertical tabs, which does not look correct at all, and requires deep css selectors to get a similar look as Vuetify 2.

Reproduction Link

https://play.vuetifyjs.com/#...

thezboe commented 2 months ago

Okay, it looks like it's rendering it with multiple root nodes, one for the tabs, and the other for the window area. So you would just need to put class="d-flex flex-row" on the parent element.

So I'm not sure this is something that can be solved within v-tabs itself the way it appears to be coded.