Issue
I am attempting to add a card with vue and vuetify that will take up the space in my container using v-flex to create a horizontal card that acts the same way vertically. I have attempted to add a height style of 100%, using fill-height, child-flex, etc but I cannot get the size of the card to fill the container. What is the correct way to adjust the height?
ref: https://vuetifyjs.com/en/components/cards
<div id="app">
<v-app id="inspire">
<v-toolbar color="green" dark fixed app>
<v-toolbar-title>My Application</v-toolbar-title>
</v-toolbar>
<v-content >
<v-container fluid fill-height >
<v-layout
justify-center
align-center
>
<v-flex text-xs-center >
<v-card class="elevation-20" >
<v-toolbar dark color="primary">
<v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer color="green" app inset>
<span class="white--text">© 2018</span>
</v-footer>
</v-app>
</div>
example: https://codepen.io/anon/pen/LmVJKx
Solution
Vuetify says for height props: Manually define the height of the card
So,in v-card element add height as follow:
<v-card height="100%">
Answered By - Roland
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.