Vuetify v-tabs leave left area blank

user_5771298 0
Viewed 775

I'm using Vuetify in Vuejs / Nuxt project.

The v-tabs control is really nice but when having a very small screen it leaves unnecessary white space in the left:

enter image description here

Although telling show-arrows=false:

    <v-col cols="12" md="8" lg="9">
      <v-tabs
        coninuous
        :show-arrows="false"
        color="rgba(255, 255, 255, 0.6)"
        centered
        center-active
        icons-and-text
      >

Does anybody has an idea how to take the full width of the visible screen for the v-tabs component?

nuxt.js vuetify.js vue.js
1 Answers

There are such cases in vuetify but as a same problem I solved it by adding my custom css to .v-tab

.v-tab {
    letter-spacing: normal !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid #f7f7f7;
    margin: 13px 13px;
}

user_100762650
Related