Bug? Card Element not stretching vertically within a Row set to Stretch?

Beta
#1

Hey Team

Unsure if this is a bug or not - but per below, the Card Element isn’t stretching vertically within a two-column row…?

Cheers,
Sam

#2

Hi Sam,

That control will tell the Column itself to fill the space, but not the elements inside it. Now that the Column is filling the entire space, you could inspect it and use the Flexbox Layout to center the card inside of it.

The Card is setup to use the height of the tallest card face (front or back). It doesn’t know how to fill the column on its own. maybe we need a min-height applied at a base level to both faces. Let me check with Kory on this.

To make everything even out, you could structure your cards to all have the same content heights. For example, your second card has two lines of text making it taller. The same amount of text would correct that.

Here’s some code that will make the card fill the whole column height by adding this element CSS to the card:

$el {
  height: 100%;
}

$el .x-card-faces {
  min-height: 100%;
}
#3

Thanks @alexander - understood

Could you implement Flex functionality into the Card element?

Similar to Buttons:

In this instance, Stretch Aligning the Card vertically via Flex would resolve this issue I’d think?

Flex for Buttons has been amazing… and in the above circumstance re. the Cards I would preferably be using Buttons anyway (however cant currently have images as backgrounds - see other issue I raised)

Cheers,
Sam

#4

Howdy, @grannysam11!

A quick note on your original question about the Card stretching in equal-height Columns…I’ve introduced a change to get this working the way you would expect and it should behave as you described above.

Regarding the Card Element and its content layout, it is already powered by Flexbox in a more constrained manner:

That “Vertical Alignment” control at the bottom of the Setup control group for the card allows you to vertically place the text and text/button content for the front/back of the Card respectively. Horizontal layouts of the text/button on the back face of the Card could present responsive issues very quickly, so we opted to make the main content only have an option to align it vertically.

That being said, the front and back text of the Card are powered by the same options/markup as the Headline Element, so you can use the flexbox controls within there to layout the icon/text in there if you need.

Overall, we’re trying to provide a lot of functionality, but also trying to keep it relatively simple for others and didn’t want to overwhelm them with the possibility of some potentially weird layouts from Flexbox on the faces.