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 i…

[image] Ⓘ Notification Badge in New Glide Community Resources 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 u…

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. [image] Custom …

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.

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 num…

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 comp…

Thanks for your reply. I have added the code in Step 2 and replaced it with tab-Dashboard [image] and added the spacer with css class: show-counter [image] Still nothing is showing up @Himaladin thanks

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.

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; …

Try checking whether your [data-testid=“tab-Dashboard”] appears in devtool. Then just copy it from there. [image] elev8td: not to mention the number isn’t dynamic If the navigation buttons cannot display data dynamically.

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

Red Notification Badge Not Appearing

Ask for Help

Himaladin July 23, 2024, 9:44am 2

3 Likes

Topic		Replies	Views
Ⓘ Notification Badge in New Glide Community Resources custom-css , tutorial , custom-code	36	1299	July 24, 2024
In app notification badge and counter Ask for Help	14	220	June 20, 2024
Private Messaging in Glide Project Showcase	8	352	March 13, 2026
🧠 CSS Hack: Dynamic CSS in Glide Community Resources custom-css , tutorial , custom-code	13	567	December 11, 2025
Home screen icon badge counter for notifications? Ask for Help	5	114	April 3, 2025

Red Notification Badge Not Appearing

Related topics