How to make sure that all cards are displayed in the same height

Problem:
In cards view, the individual cards show up in different sizes (in this case, driven by the fact that the title extends over 1 line in some cards, and over 2 lines in another).

How can we get the cards to all be displayed in the same size?

One might think to just add some spaces or linebreaks() to the cards.

But, that won’t work, because Cards headers have an automatic trim() function applied to them, so you can’t add a space,spaces, lineBreaks(), or character(10). Those will all be trimmed out.

Solution:

Add a padded text of conditional length using repeat(), white out the padded text so that the padding is not visible, and combine the initial text with the padded text.

I’ll post a step-by-step solution below, or check out the Coda doc I published on this matter at Cards in same height

The table is called ContentList.

  • Add a column in which a formula calculates the length of each title

=length(title)

  • On the canvas, write out a formula to count the maximum length of all Titles currently used, and assign a name to said formula, eg MaxLength

ContentList.Length.Max()

image.png

  • Create a new column, titled eg “Dynamic Padded Text”, in which you add a padded text element (in this case, “-”) to make up for the “missing” text characters

Repeat("-",MaxLength-Length)

Apply formatting to this padded text elements to make sure they are not visible:

Concatenate(_color("#FFFFF",Repeat("-",MaxLength-Length)))

  • Lastly, create a new column where you combine the existing title with the newly calculated dynamic padded text

Concatenate(Title,Dynamic padded text)

  • Et voilá, all cards are now the same height

(Naturally, these steps can be rolled into one, but I personally prefer any write up to a problem to be a step-by-step guide without assuming too much prior knowledge on the reader’s side. Hope that works for all of you!)

Happy building,
Nina

Big shoutout to @Scott_Collier-Weir, who so generously shared this tip with me!

5 Likes

Thank you for this detailed post @Nina_Ledid ! Hope you are doing well.

1 Like

Great post @Nina_Ledid ! Thanks for sharing.

The only thing I’d add is you need to choose your color for the Repeating padder carefully as the white that you have chosen (#FFFFFF) will show up visibly if a user changes their setting to “Dark Mode”

How you can safeguard this is by manually setting the conditional format for the card header to the same hex code as the text padder using @Jono_Bouwmeester hidden _gradient() formula.

I admit, it is a lot of work getting it going, but worth it if you are as picky as me in terms of how documents visually end up!

Heres a small task management doc I built using this trick:

5 Likes

Hi there @Scott_Collier-Weir , thanks so much for this additional info! I just ran into this very problem as I assigned conditional formatting to my columns, which totally threw off my “up-until-then-invisible-white-padding-text” :slight_smile:

I loved @Jono_Bouwmeester’s gradient solution and will try it out right away. Thanks for weighing in!