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
<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
<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.
1 Like
Nice idea!
<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.
6 Likes
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.
May I have your app link to test? I will do so tomorrow in my time.
1 Like
sure, whats your email? I need to add you as a user
Please add thinh@lowcode.agency. Thanks!
Have you changed the “nth-of-type” number accordingly? Can you share the exact code you are using?
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%;
}
its actually the forth component
sorry had a dot at the end of your email now will be ok
After some testing, I think it’s just because you haven’t published the changes yet…
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
1 Like
I had to click Publish several times, it takes a while to “load” 
The weird thing is I just published the app again and they disappeared…
All other updates show
You have this condition.
It shows if there’s a number > 0.
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…
Done can you please look now?
I really appreciate you taking the time to help me out
