Center content in tabs with Vuetify

Question

I have v-tabs to show times. I'd like to center the time after I click on arrows.

But it's not working. In the picture below, we can see the time is not aligned center. Is there some css to be applied on it?

<v-card
  class="mt-1 ml-1 mr-1 mb-0"
  v-if="item.vagas.length"
>
<v-tabs
    dark
    background-color="teal darken-3"
    show-arrows="always"
    center-active
    centered
    height="30"
    v-model="tabHora"
>
 <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
 <v-tab
  v-for="ob in item.vagas"
  :key="ob.id"
  @click="horaClicked(item, horario, ob)"
 >
  {{ ob.hora }}
 </v-tab>
</v-tabs>
</v-card>

MTay MTay · Accepted Answer · 2020-08-19T13:00:26

Before I get into my answer, there's an error in your code btw - show-arrows="always" should be show-arrows instead. Now for what I've tested with Vuetify.js and their v-tab component...

Trial Result:

So I attempted a wide variety of fixed-tabs / grow / css widths, applying of v-flex / v-layouts to control tab size and align center... No success. I can't seem to consistently control how the v-tab component and their center-active prop behaves, especially when the browser size changes from xl to xs (i.e. desktop to mobile). Therefore, for what you're trying to achieve, I recommend taking a different approach, one that you'll be able to control consistently for different browser sizes.

Recommendation (if insistent on design with navigation arrows):

If that's the design you're fixed on, Vuetify will not easily allow you to achieve that. Vuetify relies on grouping of items / objects when moving into mobile view. For that design, I suggest you go with something like the code snippet below. Point to note, you'll have to code the chevron buttons (using @click) to select a different time. You can also apply transitions to animate the change of times.

      <v-card flat dark>
        <v-layout row wrap align-center>
          <v-flex xs12 text-xs-center align-self-center>
            <v-card-text>
              <v-layout row align-center>
                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_left</v-icon>
                  </v-btn>
                </v-flex>

                <v-flex>
                  <div class="title font-weight-light">
                    {{ testValue }}
                  </div>
                </v-flex>

                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_right</v-icon>
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-flex>
        </v-layout>
      </v-card>

Recommendation (if flexible on design):

If you wish to continue using standard components of Vuetify, you'll likely have to adopt their approach of using groups and perhaps explore a different component such as button groups or slide groups (scroll to bottom for centered active item).

Center content in tabs with Vuetify

1 Answers