CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Mat
Mat

Reputation: 481

Why bottom alignment doesn't work in v-content?

I am trying to align four texts, one in each corner (as the names indicate that). the TopLeft and TopRight are aligned in the correct place but the BottomLeft and BottomRight are just below them and not on the bottom of the page..

 <v-content>
      <v-container fluid fill-height >
        <v-row align='start'>
          <v-col cols='1'>
            <p>TopLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>TopRight</p>
          </v-col>
        </v-row>
        <v-row align='end'>
          <v-col cols='1'>
            <p>BottomLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>BottomRight</p>
          </v-col>
        </v-row>
      </v-container>
    </v-content>

What am I doing wrong? Thanks

Upvotes: 0

Views: 58

Answers (1)

Igor Moraru
Igor Moraru

Reputation: 7739

I think you have a typo. It should be fill-height instead of full-height.

Edit 1:

align is aligning the content of the row only. you have to align also the rows with align-self:

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
      <v-container fluid fill-height>
        <v-row align='start' class="align-self-start">
          <v-col cols='1'>
            <p>TopLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>TopRight</p>
          </v-col>
        </v-row>
        <v-row align='end' class="align-self-end">
          <v-col cols='1'>
            <p>BottomLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>BottomRight</p>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    </v-app>
</div>

Upvotes: 1

Related Questions