# CSS bubble count

**URL:** <https://community.glideapps.com/t/css-bubble-count/34390>\
**Category:** Ask for Help\
**Created:** [November 11, 2021, 11:44am UTC](https://community.glideapps.com/t/css-bubble-count/34390 "2021-11-11T11:44:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 11:44am UTC](https://community.glideapps.com/t/css-bubble-count/34390/1 "2021-11-11T11:44:11Z")

</div>

Hi Experts!  
I was wondering if it is possible to add a bubble count on the segmented choice component:  
Im using this for the floating button by @ThinhDinh and @Lucas_Pires

```auto

<pre><span><style>

.floating-btn-style::before {
  content: "{X}";
  position: absolute;
  font-size: 12px;
  font-weight: 800;
  color: #6B503D;
  padding: 1px;
  top: 26px;
  right: 8px;
  z-index: 1;
  height: 16px;
  width: 16px;
  background-color: white;
  border-radius: 70%;
}

```

and the choice component design by @Robert_Petitto

```auto
<pre><span><style>

[data-test="app-inline-picker"] {
background: none;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: red solid 5px;
border-radius: 0px;
box-shadow: none !important;
}

```

Any way to combine the two?

Thanks guys.  
Appreciate it a lot.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e7e0377a4070d7e79144a950bd015ff27ec9b97.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 12:23pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/2 "2021-11-11T12:23:51Z")

</div>

Nice idea!

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

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) >div >div :nth-child(1) ::after {
content: "5";
position: absolute;
font-size: 16px;
font-weight: 700;
color: white;
top: 2px;
left: 10px;
z-index: 1;
height: 20px;
width: 20px;
background-color: #8b0000;
border-radius: 50%;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) >div >div :nth-child(2) ::after {
content: "4";
position: absolute;
font-size: 16px;
font-weight: 700;
color: white;
top: 2px;
left: 10px;
z-index: 1;
height: 20px;
width: 20px;
background-color: #8b0000;
border-radius: 50%;
}

[data-test="app-inline-picker"] {
background: none;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: red solid 5px;
border-radius: 0px;
box-shadow: none !important;
}

```

Replace the colors accordingly, and the content of the first (left) and second (right) numbers.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 12:45pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/3 "2021-11-11T12:45:46Z")

</div>

Perfect!  
Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 1:57pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/4 "2021-11-11T13:57:18Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f2525146c90df0b8eac5dd355d66753cd46ad928.jpeg)  
Got it

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 2:25pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/5 "2021-11-11T14:25:05Z")

</div>

Any idea why for some reason it doesn’t appear on iPhone?

Desktop Chrome not showing as well, will check Android in a sec but looks like I only see it in the builder.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 2:32pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/6 "2021-11-11T14:32:52Z")

</div>

May I have your app link to test? I will do so tomorrow in my time.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 2:34pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/7 "2021-11-11T14:34:14Z")

</div>

sure, whats your email? I need to add you as a user

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 2:36pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/8 "2021-11-11T14:36:39Z")

</div>

Please add thinh@lowcode.agency. Thanks!

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 2:40pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/9 "2021-11-11T14:40:29Z")

</div>

Go to basic.xapp.co.il

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 2:47pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/10 "2021-11-11T14:47:10Z")

</div>

Have you changed the “nth-of-type” number accordingly? Can you share the exact code you are using?

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 2:49pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/11 "2021-11-11T14:49:52Z")

</div>

```
div[id\*='screenScrollView'] \> div \> :nth-of-type(3) \>div \>div :nth-child(1) ::after { content: "Count"; position: absolute; font-size: 13px; font-weight: 900; color: black; top: -1px; left: 30px; z-index: 1; height: 19px; width: 19px; background-color: white; border-radius: 100%; } ![image|690x480](upload://3BD1XtsWtOczgaMDsF9nPGzkvrA.jpeg) its actually the forth component
```

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 2:50pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/12 "2021-11-11T14:50:28Z")

</div>

sorry had a dot at the end of your email now will be ok

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 3:29pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/13 "2021-11-11T15:29:34Z")

</div>

After some testing, I think it’s just because you haven’t published the changes yet…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 3:31pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/14 "2021-11-11T15:31:02Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/5/7568c67b5fa9c3dffa070581cff482c4d2ff2f96.jpeg)

Should be there now.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 3:33pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/15 "2021-11-11T15:33:40Z")

</div>

I’m pretty sure I did, I was uncertain if it got published or not the first time it didn’t appear so I closed the the auto publish which is always on, and published manually twice.  
So you didn’t have to change a thing?  
That’s strange…  
But as long as it works 🙂  
Thank you

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 9:08pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/16 "2021-11-11T21:08:44Z")

</div>

I had to click Publish several times, it takes a while to “load” 😅

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 11, 2021, 9:09pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/17 "2021-11-11T21:09:35Z")

</div>

The weird thing is I just published the app again and they disappeared…

All other updates show

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/534dd35a29bde7c85d1f2686498c17919eac043d.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c963196670cdda6ca49e7d1ac335f46b947e478b.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2021, 11:34pm UTC](https://community.glideapps.com/t/css-bubble-count/34390/18 "2021-11-11T23:34:07Z")

</div>

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

You have this condition.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/517a6e9693581b77e887d1e12dd670aeda0fb4d2.jpeg)

It shows if there’s a number \> 0.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 12, 2021, 6:22am UTC](https://community.glideapps.com/t/css-bubble-count/34390/19 "2021-11-12T06:22:23Z")

</div>

No, I added that after I took the screen shot in any case I showed you the same screen and user in the builder and in the web .  
its not the visible condition I can assure you .  
The visible condition is on a column that is the count of items in that list and you can see its full  
If you look at the data you see its 39 now  
you can see the list if full and its not showing.  
If you go to any other user that its not you in the builer youll see its not 0 and still not showing.  
I am adding some items in the list for you under your user to see.  
I am quite certain that its not an “OOPS” thing… 🙂

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c1b3d0d071c579afb3637845d31f4cadabeabb80.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8c51a981efcf9089e063f22f355893a4787ba7c7.jpeg)

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 12, 2021, 6:41am UTC](https://community.glideapps.com/t/css-bubble-count/34390/20 "2021-11-12T06:41:01Z")

</div>

Done can you please look now?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fdea8a52afb1349cbab3fd771d3bcdea1c2f1ee7.jpeg)

I really appreciate you taking the time to help me out

[Next page](https://community.glideapps.com/t/css-bubble-count/34390.md?page=2)