How to set the height of vuetify card

Question

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">&copy; 2018</span>
    </v-footer>
  </v-app>
</div>

example: https://codepen.io/anon/pen/LmVJKx

This is a bit late comment but I had similar problem where I needed to add overflow:hidden to card and card-text — Learner, Nov 24 '18 at 19:26

Roland · Accepted Answer · 2019-07-10T13:19:37.750

49

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%">

See it in action

edited Jul 10 '19 at 13:19

answered Apr 21 '18 at 06:39

Roland

24,554
4
99
97

Accepting this as it will solve my problem. However, @Sphinx up above in the comments had exactly what I was looking for. – Darwin Apr 23 '18 at 15:52
Well read carefully the documentation .... this was really invisible to me ... still don't know here this is written ... – Renetik May 14 '19 at 11:46
@Renetik if you go here => https://vuetifyjs.com/en/components/cards#api and search for the height prop you will see that – Roland May 14 '19 at 13:44
1

This is partially a good solution, but it won't solve the problem when a card has an action footer (like v-card-actions). Making the card 100% height will stretch the footer. Is there any way to set the v-card-text equal to the other v-card-text elements? Would love a solution like this. – Justin La France Oct 14 '19 at 14:17
Btw, I'm using v-card-text style="height: 150px;" as a quick-fix for the problem I described above. I have to mention this is not fully solving the issue (and it is disgusting since I hate inline-styles) – Justin La France Oct 14 '19 at 14:19
@JustDevelop can you please provide a codepen or even better a codesanbox in order to help you? – Roland Oct 14 '19 at 16:56
@roliroli in the meantime, I've found a solution. I've answered on the question for more details. – Justin La France Oct 14 '19 at 17:05

score 9 · Answer 2 · edited Jan 20 '20 at 04:21

I've commented on the accepted answer that:

<v-card height="100%">

gives an styling issue if you have v-card-actions (card footer).

To equalize the v-text-card component, you should create a custom (SCSS) class:

.flexcard {
  display: flex;
  flex-direction: column;
}
// Add the css below if your card has a toolbar, and if your toolbar's height increases according to the flex display.
.flexcard .v-toolbar {
  flex: 0;
}

Then, add the class to the v-card component, like this:

<v-card class="flexcard" height="100%">
  ... Your code here
</v-card>

I hope this helps if someone is facing the same issue.

Credits to Sindrepm and his CodePen

In addition to the above: The codepen does not include any card images. So in case you are using v-img components in your v-card components like this:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px" 
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

you probably want to fix their maximum heights ensuring same layout on your v-card components:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px"
    max-height="200px"
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

score 3 · Answer 3 · answered Aug 12 '18 at 02:39

I don't know if you could solve your problem... But for your case you can see a solution to the problem here: https://codepen.io/carlos-henreis/pen/djaQKb

<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 fill-height>
              <v-card class="elevation-20" height='100%'>
              <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">&copy; 2017</span>
    </v-footer>
  </v-app>
</div>

score 2 · Answer 4 · answered Apr 17 '20 at 10:03

2

i used 100vh or vw. It made it fit the whole height.

answered Apr 17 '20 at 10:03

Klod Lala

153
8

1

This is the solution that worked for me in June 2021. Thank you. (height='100vh') – Tom Jun 13 '21 at 17:35

score 1 · Answer 5 · answered Apr 21 '18 at 01:20

1

you can try add height 100% to every child-element of the container.

answered Apr 21 '18 at 01:20

Jack

19
1

score 0 · Answer 6 · answered Jun 19 '19 at 12:11

0

It will fixed the height and add scroll on vertical

<v-card class="scroll-y"  style="height: 650px">

answered Jun 19 '19 at 12:11

Atchutha rama reddy Karri

1,434
13
16

score 0 · Answer 7 · answered Jan 18 '23 at 08:07

0

For some reason h-100 doesn't work from the https://next.vuetifyjs.com/en/styles/sizing/, and indeed styling inline using style="height: 100%" or height="100%" on v-card is required.

answered Jan 18 '23 at 08:07

Daniel Danielecki

8,508
6
68
94

score 0 · Answer 8 · answered May 07 '23 at 02:18

0

% height was not working for me, I had to use vh for whatever reason and it started working properly when trying to set the height of a table within a card (and assuming the card also) for anyone who tried the above and it didn't work (for FiveM, CEF)

answered May 07 '23 at 02:18

Josh Yolles

108
1
8

How to set the height of vuetify card

8 Answers8

Linked