CODEWITHSUNDEEP
vue.jsheightvuetify.js
Kinston
Kinston

Reputation: 113

Vuetify Fullscreen property not creating an element with height:100%

I am still very new to the Vue.js and Vuetify frameworks. I am currently trying to create a front page element with a css property of height:100% in Vuetify, but for some reason I am unable to fill the page with the first row element.

As seen below, I am using the "fullscreen" Vuetify property in the v-row element.

Thanks!

<template>
      <div class="home">
        <v-row class="grey fullscreen" align="center" justify="space-around">
          <v-col xs=12 md=5>
            <h1 class="main-title">Clever and<br> Practical Designs<span class="redDot">.</span></h1>
            <h3 class="sub-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo exercitationem repellat, officia consequuntur obcaecati voluptate cum voluptas placeat dolores temporibus vel ex saepe reprehenderit porro asperiores cumque distinctio accusantium optio.</h3>
              <v-row>
                <v-btn href="" class="button white--text pa-4">
                View our Products
                </v-btn>
              </v-row>
          </v-col>
          <v-col xs=12 md=5>
            <v-img contain class="homeimg" max-width="500px" src="../assets/Large_product.png"></v-img>
          </v-col>
        </v-row>
      </div>
</template>

Upvotes: 0

Views: 1026

Answers (1)

Kinston
Kinston

Reputation: 113

I found a solution:

Adding a style element in the App.vue file to get the fullscreen class to function properly :

<template>
  <v-app>
    <Navbar />
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },
  data: () => ({
    //
  }),
};
</script>
<style lang="scss">
.fullscreen {
  width: 100%;
  height: 100vh;
}
</style>

Upvotes: 0

Related Questions