CODEWITHSUNDEEP
javascripthtmlcssvuetify.js
Diogo Silva
Diogo Silva

Reputation: 330

How to make <v-row> start at the top of <v-container> in Vuetify?

I'm trying to set to create a <v-row> inside a v-container block, and I want to vertically align it to the top. I feel like it should be as easy, just by adding align="start" to <v-row>. However this doesn't work, the <v-row> is always vertically aligned in the middle of the page. Here's my code:

<template>
  <v-container fill-height fluid class="accent pa-0">
    <v-row align="start" class="primary"> <v-sheet height="300"></v-sheet></v-row>
  </v-container>
</template>

Here's how it looks: Picture I want the grey <v-sheet> to be under the navbar, at the start of red <v-container>. What am I missing here?

Upvotes: 1

Views: 1239

Answers (1)

jacstrong
jacstrong

Reputation: 300

If you add align-start to the v-container class you'll get your expected result.

<template>
  <v-container fill-height fluid class="accent pa-0 align-start">
    <v-row align="start" class="primary"> <v-sheet height="300"></v-sheet></v-row>
  </v-container>
</template>

Upvotes: 3

Related Questions