The v-tabs component doesn't take 100% height. Upon inspecting, I could see that all the tab items (i.e. tab contents) are being wrapped inside a
<div class='v-tab__items'>
your content
</div>
How do target the v-tab__items class? Or is there another way to achieve the same? I have tried the height API from Vuetify, which did not yeild the desired result.
Any help is appreciated :)
I'm posting an answer here since I found this question when searching to solve my own problem. In my case I wanted the tab content to occupy all the height. Which sounds similar to your problem, but since the question does not provide any specifics for the problem I will make some assumptions.
Since v-tab__items will have the height of its content, create a parent element for the content that has the desired height, in my case I use the viewport height (note that, since the tabs also have its own height, the content must take that into account). I use this in conjunction with <v-layout align-center justify-center column fill-height/>. See the following example:
new Vue({
el: '#app'
}).tab-item-wrapper {
/* vuetify sets the v-tabs__container height to 48px */
height: calc(100vh - 48px)
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-tabs>
<v-tab>tab</v-tab>
<v-tab-item>
<div class="tab-item-wrapper">
<v-layout align-center justify-center column fill-height>
<v-btn color="success">Success</v-btn>
<v-btn color="error" outline>Error</v-btn>
</v-layout>
</div>
</v-tab-item>
</v-tabs>
</v-app>
</div>Note: I could not find a solution to avoid hardcoding the tab-height, by the time being this is hardcoded on Vuetify styles it's not exposed as a variable.
EDIT Updated snippet starting tag for v-layout was self closing.
This works for me in Vuetify 2.
.v-tabs-items.full-height-tab .v-window-item {
height: calc(100vh - 270px); /* Adjust 270px to suits your needs */
overflow-y: auto;
}
<v-tabs-items class="full-height-tab">
<v-tab-item>...</v-tab-item>
<v-tab-item>...</v-tab-item>
</v-tabs-items>
I found this question while trying to solve the same problem as @a--m did but their solution does not respect a single source of truth principle. If v-tabs height changes in the future Vuetify versions, the layout will stop working as expected, and calc() will be needed to be rewritten. Logically, our tab items should know nothing about header height.
Moreover, v-tab-item should not be inside v-tabs but in a separate v-tabs-items component.
Generally it is not a Vuetify issue but a pure CSS problem. It can be solved just with flexboxes and overflow property, even when the parent height is computed.
Please see my answer in more specialized thread and the adapted JSFiddle example with v-tabs.
The only difference in this specific case is a need to use !important modifier when you set overflow: auto on v-tabs-items.
Simple solution for Vuetify 2.3.10:
In the component containing <v-tabs>, <v-tab> and <v-tab-item>, add this to your style:
.v-window__container {
min-height: 100vh;
}
You can a CSS selector in your single-file component with a larger specificity
<style>
.my-component .v-tab__items
{
height: 100%;
}
</style>
