Vuetify v-bottom-navigation: Move buttons closer together?

0
votes

On some mobile devices (e.g. iPhone 5/SE) the vuetify v-bottom-navigation looks as follows:

enter image description here

To prevent this, I want to move the buttons closer together, so that it looks like on other devices:

enter image description here

My approach was to pass the small prop / class but it didn't work:

<v-bottom-navigation>

  <v-btn small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>
1
cssvue.jsvuetify.js

1 Answers

0
votes

You can override the padding and min width of the buttons and adjust it to your needs:

<v-bottom-navigation>

  <v-btn class="my-btn" small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>

.v-btn.my-btn {
  min-width: 20px !important;
}

Also take a look at the component API and SASS variables