Styling checkbox list

Hi,
is it possible to style items in an inline checkbox-list, depending on “checked” or “not checked”?
I tried with an if-then-else column to style with HTML, but I can’t add an Rich Text to the list.

Adding a Rich Text component (for testing), then the color is correct.

Wim

I believe you can only style the checkbox itself, not the text that goes with it.

yes, use CSS selected child number in the template

Thanks for your reply, but can you explain it a little bit more please.

  • I don’t know how much items there will be, so it’s difficult to set a “selected child number”
  • the color depends on the status of the boolean (checked/unchecked), not on the position of the item.

Yes… that’s why, i suggest using a template column to create css code, you can replace child number based on if else column, that will check if is true…
Generate a row number first… so you know which child to target

Before you spend a lot of time on a complicated CSS, give this post a read.

It will take me 5 min to fixed lol

I crafted a quick app to dive into Uzo’s idea above.

Basically, we do the things below:

  • Craft out an index for each row, and add 1 to it so we can have the nth-index to use in CSS.

  • Use an If-Then-Else - template column combo to generate a CSS snippet for each row.

  • Combine them all in a joined list column, and add a <pre><span><style> tag to round it off.

Feel free to copy it back here.

4 Likes

you can apply that technique to any list…

To Uzo and ThinhDinh : WOOOOWWW. :clap:

Thanks both !!

@ThinhDinh I’m trying to copy the Things table to my app, but for the index-column I need a URL for the experimental code. I searched this forum, but couldn’t find it.

2 Likes

you don’t need code’:

As Uzo said above, it’s 3 columns:

  • RowID
  • Lookup to return all rowIDs
  • Find Element Index

actually 4… he needs to add 1 to the index :wink:

2 Likes

Hi,
Is this technique also possible when grouping records? In my app, it doesn’t work and I think it’s because the index doesn’t match the (un-)checked record(s) anymore.

If the solution is too complex, just ignore my question :wink:

The solution above only applies for a simple inline list, with no sorting (earliest to latest).

With grouping, you have to take into account where the item will land in each group, and where each group is on the screen, and that’s super complex.

1 Like

That was also what I thought.
Never mind; thanks for the first help and the quick app !!