Getting two outlined cards on the same row to have the same height, regardless of content

Anvil Q&A
1

I have an app that has rows of data, each which has 2-4 columns within it. I’m displaying bullet lists using Rich Text and each RichText area can have any amount of lines of data within it.

When 2 or more of these Rich Text areas appear on one row I would like them to have the same height - so the boxes both look the same but one has more empty space than another.

image
image2560×636 70.7 KB

I have tried giving them roles with css classes that ought to turn the container into a flex box and then allow each to flex and fit the content, but for some reason this is overridden by other css in the app (and I can’t see where). Here’s the css I am using:

/* Component: Card */

.anvil-role-outlined-card {
overflow: hidden;
border-radius: 12px;
background-color: %color:Surface%;
border: solid 1px %color:Outline%;
padding: 15px;
flex-grow: 1;
height: 100%;
}

/* Component: Flex Column */
.anvil-role-flex-container {
  display: flex;
  flex-direction: column;  /* or row, depending on your layout */
  border-radius: 12px;
  background-color: %color:Surface%;
  border: solid 1px %color:Outline%;
  padding: 15px;
}

This strikes me as something very basic yet I can’t seem to find a solution easily.

Here’s a mockup app where you can see 5 lines in one box and 1 line in another, where Box 1 is bigger than Box 2 (I’d like them to both be the same size, irrespective of their contents)

1 Like