CODEWITHSUNDEEP
vue.jsvuetify.js
MapleDanish
MapleDanish

Reputation: 111

Vuetify vertical spacing

11/10 Chance it's just too late in the day and I'm in idiot mode but here we go...

I have a list of nav links (v-list-item in a v-list) ...

I'm trying to force one of the links to sit at the bottom of the drawer. For some reason even custom CSS isn't moving it so I'm stuck.

Here's what I have, any help appreciated:

 <v-navigation-drawer v-model="drawer" app clipped>
  <v-list>
    <!-- Navbar is displayed with for loop -->
    <v-list-item
      link
      v-for="(link, index) in links"
      :key="index"
      router
      :to="link.route"
    >
      <v-list-item-action>
        <v-icon>mdi-{{ link.icon }}</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>{{ link.name }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-list-item
      link
      router
      :to="'/feature-request'"
      class="text--disabled"
      :align-self="end"
    >
      <v-list-item-action>
        <v-icon class="text--secondary">mdi-star-circle-outline</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title class="text--secondary"
          >Feature Request</v-list-item-title
        >
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Upvotes: 4

Views: 9075

Answers (1)

AVJT82
AVJT82

Reputation: 73337

You can use flex to achieve what you want. For the last item, set class mt-auto, which places the last item on the bottom. There is still a gotcha here, v-list-item has an inbuilt flex class property, so you need to override that:

.v-list-item {
  flex: 0;
}

So set list to full height and place flex:

<v-list class="d-flex flex-column" height="100%">

Iterate the first items as you have, and for the last item, place the aforementioned mt-auto:

<v-list-item class="mt-auto">

A CODEPEN for your reference.

Upvotes: 6

Related Questions