Explore

Make cards appear in the same height

⁠

The cards in card view 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(). And then using all the color tricks so that the padded text isn't visible. The padder I always use is a “-“

Here’s a step-by-step solution, and I’ll attach a coda doc, where I replicated this, for easy reference as well. 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()

⁠

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

⁠

View of Content List

View of Content List

IRC - The power of welcome

Asset?

AllIn to Vote

Asset?

NFL - Confetti Tweets

Asset?

Draft update on new social media schedule

Asset?

JetBlue - Kind Design

Asset?

Nitro Cold Brew

Asset?

Converse - Teen self-expression

Asset?

⁠

MaxLength:

41

⁠

Concatenate(_bold("This sample shows "),_italicize("how to use additional formatting "),_color("#F04040","to make data on a form stand out even more"),BulletedList("have fun ","with it"))

Content List