Why vuetify data-table stretches the whole page instead of render scroll bar?
15,325
Looks like there may be a small bug in vuetify CSS where their layout
class doesn't play nice with the table's responsiveness because it is flex.
Adding the following is one way to fix it:
.layout {
display: inline-block;
width: 100%;
}
Or you could add an additional div to contain the table without overriding the layout
rules.
Author by
frutality
Updated on July 30, 2022Comments
-
frutality over 1 year
Codepen: https://codepen.io/frutality/pen/LQRGLv (please see it, because for some reason code inserted here is cut)
<div id="app"> <v-app> <v-navigation-drawer app fixed clipped v-model="drawer"></v-navigation-drawer> <v-toolbar app dense absolute clipped-left dark color="primary"> <v-toolbar-title> <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> <span class="hidden-xs-only">Logo</span> </v-toolbar-title> </v-toolbar> <v-content> <v-container fluid fill-height> <v-layout> <div> <v-data-table :headers="headers" :items="titles" hide-actions disable-initial-sort class="elevation-1"> <template slot="items" slot-scope="props"> <td> {{ props.item.title }} </td> <td>{{ props.item.type }}</td> <td>{{ props.item.imdb_id }}</td> <td>{{ props.item.is_adult }}</td> <td>{{ props.item.start_year }}</td> <td>{{ props.item.end_year }}</td> <td>{{ props.item.duration }}</td> <td>{{ props.item.genres_temp }}</td> </template> </v-data-table> <div class="text-xs-right"> <v-btn color="primary" class=mr-0>Refresh</v-btn> </div> </div> </v-layout> </v-container> </v-content> </v-app> </div>
If data-table has a lot of columns and your browser width is not big (try ~1300px or even ~600px), we can't see all of it's content.
But if you go to https://vuetifyjs.com/components/data-tables, you'll see that nice horizontal scroll bar under each example.
Why it's not appearing in my codepen?
-
frutality about 6 yearsDefinitely not going to override vuetify rules. I changed v-layout with div that have
max-width: 100%
rule. Thanks for pointing in right direction.