CODEWITHSUNDEEP
vuetify.js
RafalW
RafalW

Reputation: 126

Vuetify v-container with fill-height items alignment

I'm new to Vue and Vuetify and this is probably something obvious, but I'm googling it for over an hour and I'm still stupid. So basically I want to create wrapper using full height of viewport with one element aligned top, and one bottom (This will be inside v-navigation-drawer, few buttons on top and one bottom)

Here's sample code

 <v-container fluid fill-height>
   <v-row align="start">
     <v-col>I want this to align Top</v-col>  
   </v-row>
   <v-row align="end">
     <v-col>And this to align Bottom</v-col>  
   </v-row>
 </v-container>

And this is how it looks https://codepen.io/rafal_w/pen/ExXeeWm

As you can see fill-height tag positions elements evenly with margins, and align tag on elements doesn't work. What do i do wrong?

Upvotes: 1

Views: 2288

Answers (2)

RafalW
RafalW

Reputation: 126

Ok, so instead of align tag on child items, i was supposed to use align-self-start and align-self-end classes

https://codepen.io/rafal_w/pen/WNOaXVL

  <v-container fluid fill-height>
    <v-row class="align-self-start">
      <v-col>I want this to align Top</v-col>  
    </v-row>
    <v-row class="align-self-end">
      <v-col>And this to align Bottom</v-col>  
    </v-row>
  </v-container>

Upvotes: 2

Mani Mirjavadi
Mani Mirjavadi

Reputation: 1073

In my opinion the better way to do this with Vuetify is the following:

<v-app id="app">
  <v-card height="1000">
    <v-app-bar
      color="red"
      dense
      fixed
      flat
      dark
    >
      <v-spacer></v-spacer>
      <span>Align Top</span>
      <v-spacer></v-spacer>
    </v-app-bar>
  </v-card>
  <v-bottom-navigation fixed color="green">
    <v-spacer></v-spacer>
    <span>Align Bottom</span>
    <v-spacer></v-spacer>
  </v-bottom-navigation>
</v-app>

Upvotes: 1

Related Questions