Bubble dynamic in tab menu, with CSS?

[Carter]

Hello, does anyone know if we could add a kind of bubble (like for notifications), with a css trick in the tab menu? For example, if there were 2 rows with a condition in this page, a bubble with the number 2 would then appear on this menu icon. It is to create a dynamic notification page.

Like this: Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

But for the tabmenu like this image:

[Robert_Petitto]

Yes…it’s possible. Just built this for a client (start from 1:24):

Only tedious part is that you have to add the CSS on EVERY details screen in your app.

It would be SO much better if this were a native feature in Glide. A checkbox with an “Add counter” option that lets you select the column (either from within that tab or the user profile sheet).

Mockup:

@tristan @Jason

[XceL]

I have not tried to implement this just because of needing css on every single screen
If we can have this natively that would be so amazing

[Carter]

it’s really good stuff

Do you think you can help me with my problem? Which I think is much simpler anyway. We just wanted to display a number that is available in a row.

Like the picture below.

We just want pick the number “total” and put it into the menu icon.

If you have any suggestion i take it !

[Uzo]

use template column for CSS

[Robert_Petitto]

It doesn’t make anything “simpler” unfortunately. Adding a counter/badge over a tab icon (no matter where it comes from) is tedious and a bit hacky. Here’s how:

Goals · Glide - 15 June 2022

Here’s the CSS I use:

<pre><span><style>
 button[aria-label="Profile"]::before {
content: "###";
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%;
}

[Carter]

It’s like a miss something

here was our rich text

Here was the css template

And here we can see the template workin fine

So the bubble never show up, maybe I miss something

[Carter]

Dont know if you see my last post because I dont click in “reply”

[Robert_Petitto]

Hm…not sure. It’s working on my end…

[Carter]

@Robert_Petitto

<pre><span><style>
 button[aria-label="Profile"]::before {
content: "###";
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%;
}

Ok it’s working on my pc… dont know if it’s maybe a cache problem, but it’s working ! thanks

[Carter]

And thank’s so much ! I need a lot of this option !