Vue, Vuetify - Reduce space between buttons in toolbar

Question

I've tried everything to reduce the space between the buttons, so that they all sit nicely centered and evenly spaced in the toolbar when on mobile, but for some reason the space next to the left-most button remains, while the right-most button is slightly over the right edge, as seen in the pic below.

Here's the last thing I tried before coming to ask a question here:

<!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere -->
<v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0">
    <v-toolbar-items class="ma-0 pa-0">
        <v-btn 
            flat 
            v-for="link in navigation" 
            :key="link.text" 
            :class="{ 'teal lighten-2':link.active }" 
            @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
            class="mobile ma-0 pa-0"
        >
            <v-icon>{{ link.icon }}</v-icon>
        </v-btn>
    </v-toolbar-items>
</v-toolbar>

I've also tried things like creating a custom style rule (non-scoped, otherwise Vuetify seems to ignore 'em) like .v-btn.mobile { margin:0; padding:0 } to no avail, and trying all the different justify- attributes.

Other than that I've also tried different Vuetify elements like v-footer, and adding in v-containers, v-layouts and v-flexs. None of which seem to work.

The image is a screenshot from my phone, while connected to the vue dev server on my pc on the same network, in case that makes a difference.

Turtlefight Turtlefight · Accepted Answer · 2019-07-17T20:37:23

The padding comes from the .v-toolbar__content element created by vuetify.
Unfortunately vuetify doesn't provide a straight-forward way to get rid of this padding.

However you can easily override this with a custom style:

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-toolbar-items>
    <v-btn 
      flat 
      v-for="link in navigation" 
      :key="link.text" 
      :class="{ 'teal lighten-2':link.active }" 
      @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
      class="mobile"
      >
      <v-icon>{{ link.icon }}</v-icon>
    </v-btn>
  </v-toolbar-items>
</v-toolbar>

With the following style (assuming you're using plain css)

<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
}
</style>

You're right, you can't style the vuetify-generated elements directly, but you can keep the scoped styles by using deep selectors
(the >>> in the example, you might need to use /deep/ or ::v-deep if you're using a css preprocessor)

Edit: For centering and stretching the buttons you just need to remove the v-toolbar-items and give the buttons the block attribute and the fill-height class, e.g.:

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    block
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

If you only want to center the items, you could use something like this:

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height ma-0"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

<!-- with the following style: -->
<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
  justify-content: center;
}
</style>

Vue, Vuetify - Reduce space between buttons in toolbar

1 Answers