# Red Notification Badge Not Appearing

**URL:** <https://community.glideapps.com/t/red-notification-badge-not-appearing/75098>\
**Category:** Ask for Help\
**Created:** [July 23, 2024, 8:10am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098 "2024-07-23T08:10:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rutger](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@Rutger](https://community.glideapps.com/u/Rutger)\
**Post date:** [July 23, 2024, 8:10am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/1 "2024-07-23T08:10:46Z")

</div>

We would like to have a screen in our app where all notifications are displayed. Building that page is not a problem, but we also would like to have an indication of the number of notifications in the menu.

I’ve seen several topics on the forum where a red dot with a number displays the number of items. This would be perfect for us!

To test, I created a page where I added a rich text component with this code:

```auto
<pre><span><style>
 button[aria-label="Notification"]::before {
content: "1";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding: 2px;
  top: 3px;
  margin-left: -20px;
  z-index: 2;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}

```

However, the dot does not appear. Are we doing something wrong?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/35c4084197c9a06783073d25550d479934f052bb.png)

---

<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:** [July 23, 2024, 9:44am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/2 "2024-07-23T09:44:37Z")

</div>

> [@Ⓘ Notification Badge in New Glide](https://community.glideapps.com/t/notification-badge-in-new-glide/74295):
>
> Using HTML, this simple notification badge and counter can be written into a template column and displayed through a rich text component. This allows you to dynamically show the number of unread chats for your users. Note that your counter data must be in the user table and contain the number of unread chats, or be empty if all chats are read. To show or hide (empty) the badge, you need to add the class name “notifBubble” to the rich text component and use the following Html & CSS code: \<div st…

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [July 23, 2024, 1:39pm UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/3 "2024-07-23T13:39:29Z")

</div>

The method of applying CSS through a rich text component only applied to classic apps, so if you are pulling that code from an old post, it most likely doesn’t apply anymore. Anything with the PRE SPAN STYLE tags is old.

What @Himaladin shared is the new way to apply CSS.

> **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/reference/user-experience/css-for-apps)**
>
> Customize the way your app looks with CSS.

---

<div class="post-metadata">

**Author:** ![Rutger](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@Rutger](https://community.glideapps.com/u/Rutger)\
**Post date:** [July 24, 2024, 6:56am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/4 "2024-07-24T06:56:21Z")

</div>

Thanks for thinking along! The things I had tried were indeed no longer supported. With the HTML code, I get a red bubble on my screen. So that works!

I can’t get the bubble in the right place. I’ll continue responding in Himaladin’s existing thread, so everything stays nicely bundled.

---

<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, 12:04am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/5 "2024-08-18T00:04:24Z")

</div>

Honestly I’m having trouble with this also. I can get the floating notification but I actually need it to be in the current screen (Dashboard) and not just floating to the right on the bottom.

It is currently set up as a rich text component and via a template. Note - it is currently reading the number of Open Stipulations, not the number of alerts which is why a “2” is showing).

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/a/4a08d32483ffc02e6565b230896c188922d7ed06.png)

Thanks in advance

---

<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, 12:31am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/6 "2024-08-18T00:31:26Z")

</div>

If you only need to display a badge on the navigation tab, you can skip the first code section and go directly to the “Additionally, CSS codes are provided below that you can choose based on your needs: point number 2.”  
Here, you don’t need any code in the rich text, but you just need a spacer component placed on each screen.

---

<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, 12:44am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/7 "2024-08-18T00:44:44Z")

</div>

Thanks for your reply.  
I have added the code in Step 2 and replaced it with tab-Dashboard  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c10c4670942ec2d2697a72224f6183e1fd03a557.png)

and added the spacer with css class: show-counter  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b476803da0f162d37fe435138d15425b80acbfac.png)

Still nothing is showing up @Himaladin thanks

---

<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, 12:58am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/8 "2024-08-18T00:58:30Z")

</div>

Does your plan have custom CSS enabled? I’ve seen in another thread, it turns out the problem is that the custom CSS hasn’t been activated by Glide.  
Your code is for display on mobile. Make sure you view it on mobile, not desktop.

---

<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, 1:05am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/9 "2024-08-18T01:05:31Z")

</div>

It is enabled. I know this because I can add this code

```auto

.eGYzZc.tab-active::before {
    content: "1";
    position: absolute;
    font-size: 11px;
    font-weight: 800;
    color: white;
    padding: 2px;
    top: 3px;
    margin-left: -20px;
    z-index: 2;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
}

```

and get the notifications to work BUT it adds it to every selected screen.

Here’s what that looks like:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/3074c0db71d7da01cd630f09653de857a4b5ae72.png)  
but any screen you go to, the number follows  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94ac98e1bf65db90c88e908256f72b1d4aa23d42.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/6/e6d2834b8cdf9500821d852517226f114d5207e0.png)  
etc.

(not to mention the number isn’t dynamic - probably why I saw you did a “!” instead)

We just upgraded to Enterprise a few days ago from Pro.

---

<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, 1:12am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/10 "2024-08-18T01:12:21Z")

</div>

Try checking whether your [data-testid=“tab-Dashboard”] appears in devtool. Then just copy it from there.

> [@elev8td](#):
>
> not to mention the number isn’t dynamic

If the navigation buttons cannot display data dynamically.

---

<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, 1:14am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/11 "2024-08-18T01:14:55Z")

</div>

You are right. It was an extra space in the code. It is working now with the “!” symbol. Thank you @Himaladin !!!

---

<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:16am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/12 "2024-08-18T04:16:27Z")

</div>

Is it possible to display a  
 ![circle](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc1194164054af7daf5ddc57ee9537cbcc1f1602.png)  
image on a checkbox style collection component?

the easiest way I would think is to display the img before the text, but trying to do that with a template didn’t work because it just reads the raw code and doesn’t display the image.  
I know that this can be done with a rich text but the text displayed is coming from a checkbox collection like an alerts center  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/516586f6ba65010bb61239f389960ebbb2276415.png)

Any thoughts on this?

---

<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, 4:29am UTC](https://community.glideapps.com/t/red-notification-badge-not-appearing/75098/13 "2024-08-18T04:29:29Z")

</div>

It should work even if one of your column values contains a counter; the CSS will only shift it. However, I’m not quite sure about your goal—whether each item in the list has its own uniqueness or if it is a global condition from something else. It’s better to start a new topic to avoid confusion in this thread. I’ll provide the solution once I’m back at my computer.