Red Notification Badge Not Appearing

[Rutger]

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:

<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?

[Himaladin]

Ⓘ Notification Badge in New Glide

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…

[Jeff_Hager]

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

[Rutger]

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.

[elev8td]

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).

Thanks in advance

[Himaladin]

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.

[elev8td]

Thanks for your reply.
I have added the code in Step 2 and replaced it with tab-Dashboard

and added the spacer with css class: show-counter

Still nothing is showing up @Himaladin thanks

[Himaladin]

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.

[elev8td]

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

.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:

but any screen you go to, the number follows

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.

[Himaladin]

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.

[elev8td]

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

[elev8td]

Is it possible to display a

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

Any thoughts on this?

[Himaladin]

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.