Notification Badge next to Collection list item

Ask for Help
1

Continuing the discussion from Red Notification Badge Not Appearing:

@Himaladin

In this example I only want the notification on the list item that discusses Open Stipulations
image

I should also note that all the alerts I have set up are separate lists, not one collection
image
I purposely did it this way so it’s easier for individual visibility conditions and so they can open to details screens as needed

thanks!

2

Actually, I solved this on my own in a different sort of unconventional method.
I took a screenshot image of the checkbox circle icon
gold circle

I then changed the checkbox collection style to a list. In the list image section I imported my screenshot of the checkbox circle for the 2 basic alerts.

For the Open Stipulations, I used the red notification icon I’d created - then I just made everything compact.

image

It almost works but the red alert notification icon is a slightly larger size than the checkbox circles.

So I’m open to suggestions on how to fix this or anything else that would make this presentation pop

3

You should be able to use a filter instead of creating many identical components.

I’m not quite sure what you’re expecting. Should your badge be outside of the checkbox or exactly overlapping the checkbox?

1 Like
4

I will look into setting these up as one collection, for now this is working as intended

as for the badge, I think I solved that one too.

My original badge image was not the same resolution or size as the circle icons. By changing the image I got everything sized the same which seems to have worked and serves the intended purpose

image
image468×562 33.7 KB

Initially my original question wasn’t exactly this, but it is working and looks decent to where I don’t feel I should modify it any further.

5

I suggest an idea: what if your badge disappears when the checkbox is checked? I believe this might be your goal. Additionally, you can freely adjust the width or height of your badge.
class name is badgeOnChecklist

Screenshot 2024-08-18 at 13.26.07
Screenshot 2024-08-18 at 13.26.07878×770 41.4 KB

#page-root:has(.badgeOnChecklist .collection-item:nth-child(2) [data-state="unchecked"]) .badgeOnChecklist .collection-item:nth-child(2) .is-pointer > div::before {
    content: "!";
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
1 Like
6

In this very instance, the badge disappearing isn’t necessary because the component only shows when there are open stipulations. Alternatively I could put a template and if/ then condition which says “Congrats you have 0 stipulations” but it seemed unnecessary to do so.

I greatly appreciate the help and for others it would definitely mark your answer as the “solved” answer because that’s likely most people’s use case.

1 Like
7

I just added a condition at the beginning of the selector. If you change the selector to .badgeOnChecklist .collection-item:nth-child(2) .is-pointer > div::before, it will not disappear even when checked.

8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.