# Notification Badge next to Collection list item

**URL:** <https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704>\
**Category:** Ask for Help\
**Created:** [August 18, 2024, 4:41am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704 "2024-08-18T04:41:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![elev8td](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elev8td/32/72546_2.png) [@elev8td](https://community.glideapps.com/u/elev8td)\
**Post date:** [August 18, 2024, 4:41am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/1 "2024-08-18T04:41:28Z")

</div>

Continuing the discussion from [Red Notification Badge Not Appearing](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/10):

@Himaladin

In this example I only want the notification on the list item that discusses Open Stipulations  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ce80ca3d3a0467b5cc0e3b3efb2bcc572303630f.png)

I should also note that all the alerts I have set up are separate lists, not one collection  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/15edede0eae8629c902e12660f74b4f8e48d5649.png)  
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!

---

<div class="post-metadata">

**Author:** ![elev8td](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elev8td/32/72546_2.png) [@elev8td](https://community.glideapps.com/u/elev8td)\
**Post date:** [August 18, 2024, 5:12am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/2 "2024-08-18T05:12:33Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/174a0778b7a9b28c230e444fce4a84e5f847ab22.png)

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d21a2b7ea406a555e2b176d3bde71ece22c17429.png)

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 18, 2024, 5:29am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/3 "2024-08-18T05:29:39Z")

</div>

> [@elev8td](#):
>
> I should also note that all the alerts I have set up are separate lists, not one collection

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

> [@elev8td](#):
>
> It almost works but the red alert notification icon is a slightly larger size than the checkbox circles.

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

---

<div class="post-metadata">

**Author:** ![elev8td](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elev8td/32/72546_2.png) [@elev8td](https://community.glideapps.com/u/elev8td)\
**Post date:** [August 18, 2024, 6:03am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/4 "2024-08-18T06:03:03Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8fc2f6ed56fce48fdc01bb0d88768645707223e4.png)

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 18, 2024, 6:31am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/5 "2024-08-18T06:31:39Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13c98ac4d4f018af705dc739ac827546e4a146fc.png)

```auto
#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;
}

```

---

<div class="post-metadata">

**Author:** ![elev8td](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elev8td/32/72546_2.png) [@elev8td](https://community.glideapps.com/u/elev8td)\
**Post date:** [August 18, 2024, 6:36am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/6 "2024-08-18T06:36:03Z")

</div>

> [@Himaladin](#):
>
> I suggest an idea: what if your badge disappears when the checkbox is checked? I believe this might be your goal.

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 18, 2024, 6:40am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/7 "2024-08-18T06:40:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 25, 2024, 6:40am UTC](https://community.glideapps.com/t/notification-badge-next-to-collection-list-item/75704/8 "2024-08-25T06:40:48Z")

</div>

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