Adding a badge style count indicator

Recently, I had the requirement of showing how many pending whatchamacallits I had with a visual count indicator. I thought that a small bubble with the count would fit the bill. A quick search for “iphone badge css” yielded many hits. But I settled on this one.
I wanted to show the pending count on top of an image (used as an icon) and on a standard APEX button.

Here’s the end result.

Icon Badge

Icon Badge

Button Badge Count

Button Badge Count



Here’s final CSS I used:

To use it you just need a span (or div) tag with the count (or message) inside the span. For example:

For the icon I used the iconMenuBadge class for positioning. For the button I used buttonBadge.

For your theme, buttonBadge may need the top and left positions adjusted. Also, your buttons will need “position: relative;” or the absolute positioning of the badge will keep cascading up to the first position relative element or the top of the page. That would not look good.

To apply it to a button (or image, or any element) I used a dynamic action that would add it to the element.
For example, I would use a Dynamic Action on “Page Load” with a regular PL/SQL condition like “:Pn_NOTIFICATIONS > 0”. Then the True Action would be “Execute JavaScript Code” with this code:

When the page loads, the badge HTML is added right away after first span of the button (but inside the button). In this case, btnReset is the Static ID I’ve assigned to my button.  The button template on my theme is of the form <a class=”uButton”><span>Button Label</span></a>.  And to avoid conflict with “a.uButton span” I’m adding the badge as a div. If we inspect the page, the final HTML looks something like this:

It is very important to make the button position relative. So I add this CSS also:

This will anchor the badge to the button. That’s all there is to it.

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

One comment on “Adding a badge style count indicator
  1. Juergen Schuster says:

    Thanks Jorge, excellent solution!

I love comments, write me a line