Vuetify: equal height cards within layout and flex

[ndamjan]

Is there an existing way to achieve that all cards have equal height in a row when using layout?
My workaround is calculating cards height like in the example below in order to consider the margin (using current version 0.12.0).

  .flex > .card.ma-2
    height calc(100% - 16px)!important

The layout is generated like this, and original height of cards is not the same without the above rule:

  v-layout(row wrap child-flex)
    v-flex(xs12 sm6)
      card1
    v-flex(xs12 sm6)
      card2

Maybe a more generic approach would be good for layout - e.g. using the fill-height in a different way (currently I add full-height on the layout element and so the effect is limited only to desired places):

  .full-height > .flex > .card.ma-2
    height calc(100% - 16px)!important

[smares]

http://codepen.io/anon/pen/mmadzG

[johnleider]

Does @smares codepen answer your question?

[ndamjan]

Only partially :)
Neither mine nor @smares approach works in Safari. Also, setting the height to 100% this way will ignore any margins... so in case of items wrapping in multiple rows they start overflowing to the margin area effectively ignoring the .ma-2 class. That's the reason I had to use (100% - 16px) for the case of cards with .ma-2 margin. I use only this now, but to cover everything we would need to cover all .ma-N, .mb-N and padding classes as well.

[ndamjan]

In this pen you can see what I mean:
http://codepen.io/anon/pen/WjLxpP

What works in this case is putting height="100%-16px" but I don't like it :)

[smares]

Well, I don't know what the use-case is, but why not put the margins in the v-flex if you want margins in case content wraps for example? Updated my pen above.

[johnleider]

Okay I'll look into it.

On May 22, 2017 10:21 AM, "Damjan Namjesnik" [e-mail]
wrote:

Only partially :)
Neither mine nor @smares https://github.com/smares approach works in
Safari. Also, setting the height to 100% this way will ignore any
margins... so in case of items wrapping in multiple rows they start
overflowing to the margin area effectively ignoring the .ma-2 class. That's
the reason I had to use (100% - 16px) for the case of cards with .ma-2
margin. I use only this now, but to cover everything we would need to cover
all .ma-N, .mb-N and padding classes as well.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/567#issuecomment-303114188,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgl2-aiaEHeeahsG9ETSSr2-Y_RDYks5r8ZnZgaJpZM4Nh9wk
.

[johnleider]

So this is a weird one. I'm not really sure how I can solve this for you as this has more to do with flexbox and your implementation than Vuetify. v-layout/v-flex are just functional helper classes that help convert some easy to remember semantics into css. If you inspect, the flex divs are doing what they are supposed to with a default align-items of stretch. The cards only fill that height if something is given, such as 100%.

On some browsers though, like Safari, they do not interpret as the container actually having a physical height, so 100% actually just makes them the maximum height that they need.

[ndamjan]

Yes, I know it's kind of specific for my wishes with the card layout...

Because of your hint, I found a way to set this up using flexbox, eliminated all of the calc(...) stuff and got it working in Safari also.

These are the new styles I am using, only change I have to do to have it work is to add full-height to layout element.

  .full-height .flex
    display flex

  .full-height .flex > .card
    flex 1 1 auto

Closing the issue as I am happy with this solution.

[SumNeuron]

This is a similar question, so I am appending it here, but is there an vuetify equivalent to bootstrap card decks? e.g. have two cards one with 1-line title the other with 3-line title, but have the start/end of the titles, the start/end of the text-body and the start / end of the footers line up?

[mcanyucel]

This is a similar question, so I am appending it here, but is there an vuetify equivalent to bootstrap card decks? e.g. have two cards one with 1-line title the other with 3-line title, but have the start/end of the titles, the start/end of the text-body and the start / end of the footers line up?

yes, this is actually an important feature. i have a grid list with 3 cards per row and each have different text lengths in their <v-card-text>, resulting in different heights for each card. If a fixed height is specified then it works, but, then it kind of sucks on zooming or different viewport sizes :/

[SumNeuron]

Until card decks / masonary is implemented, I am using a workaround similar to this. While the styling in the codepen is barebones to highlight functionality, it at least makes a plethora of cards semi-managable.
Alternatively this pen sort of gets there.