Add css to each list item

Ask for Help
1

Hey there, my first post here!

I’m working on a chat application and I want to show how many unread messages each chat has.

With this code:

<pre><span><style>

*.selected-item-list-item-1::before {
content: "2";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding-left: 4.5px;
 padding-top:0.5px;
  bottom: 5px;
 right: 12px;
  margin-left: 20px;
  z-index: 2;
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
}

</style>

I’m achieving it:

WhatsApp Image 2022-08-18 at 14.59.46

But that’s just a test with a different table.
With the right table, which is a Glide Table, that’s not working.

I tested the code with another Glide Table and it didn’t work either. It will work with some Google Sheet tables, but with others it doesn’t.

How can I solve this? Any ideas?

Thanks!

2

Assuming you have a count for each row, and know the “order” number for each (list-item-1, list-item-2 etc), then you can do this:

  • Create a template column for each row, with the variables being the “order” number and the “content” number. The template should just contain this part.
*.selected-item-list-item-X::before {
content: "Y";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding-left: 4.5px;
 padding-top:0.5px;
  bottom: 5px;
 right: 12px;
  margin-left: 20px;
  z-index: 2;
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
}

  • Create a joined list column to join all results of the template above, with the delimiter being 2 new line characters.

  • Add a final template column with the structure being:

<pre><span><style>

{joined list content}

</style></span></pre>

Then display the final template column in a rich text component.

The hard part here is whether you know the order number in advance and/or can generate it. If you have filters/sorting that should be trickier.

3

Hi there,
Thanks for your reply! I managed to solve it yesterday doing basically what you’ve said. The problem was that *.selected-item-list-item-X wasn’t working for the table I was using… So I created another table which receveid de right one’s row Id and did all the logic there.

I will mark the post as solved!

Have a nice day :slight_smile: