I am trying to use this code by @Robert_Petitto to add a notification badge and counter to the profile tab. I have added the code to a template column to display dynamic number and a Rich text on the screen.
It doesn’t show. Am I missing something? Does this CSS trick still work?
button[aria-label="Profile"]::before {
content: "###";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
padding: 3px;
top: 6px;
right: 13px;
z-index: 1;
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
}
1 Like
Please try this:
[data-testid="tab-Profile"]::before {
content: "!";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
padding: 3px;
top: 6px;
right: 15px;
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
}
@Himaladin Thanks. This code in my template column still doesn’t show anything on the profile tab and is bound to a rich text component on the profile screen:
[data-testid="tab-Profile"]::before {
content: "###";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
padding: 3px;
top: 6px;
right: 15px;
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
}
Am open to alternatives to this method.
If you use new Glide, the richtext component does not support custom-css. Try looking at the Settings > Appearance section and paste it there. However you cannot fill in content dynamically.
Try to explain your use for this. Maybe we can still find a walkround.
1 Like
Saved me @Himaladin. This I did not know. My use is just to display the number of unread comments, number is a rollup in a userspecific field and decreases as comments are opened. Any current workarounds for this?
If it displays in components other than tab-bar, I’ve succeeded. In other words, this component already has data on the number of unread chats that appear on the frontend.
If it concerns tabbar, I think you can only display static data, for example “!”. However, you need to have a helper component or the first component that I mentioned above.
Seems like what I should do. I guess a Hint/Button will do. Please share how I can show in a component instead. Really appreciated.
I’ll give it to you when I can access my computer. Sorry, can you provide a screenshot of the components you need to display for the number of unread comments. Or do you just want to display static data in the tabbar?
I figured the way out will likely be a sticky button that appears when Unread is >=0 and clicking goes to a notifications screen. That way I am not dependent on the Appearance>CSS. I’d love to know however if you have a way of adding the red badge with a dynamic counter on a component. This is the most ideal.
I think there is a misunderstanding. CSS does not have the capability to display a number if the number is not in the component. CSS is only limited to styling, and through the pseudo-class :has, it can show/hide effects on other components.
Here, I need to know in which component the number is presented.
This is an example of when I use the action row component:
If you understand CSS, you can experiment with that pseudo-class yourself.
Ooh, I do little CSS. That’s a Button like this:
Wait, the action row is perfect actually. Do share how to do this please. thanks
I’m having trouble with my existing CSS, hopefully this will work.
As a note, you need to change your counter using the ITE column that if counter equals 0 then empty. CSS will not recognize whether the number is 0, 1, 2 etc. Another thing is to give the class name “mentionBubble” to your Action Row component.
.mentionBubble {
width: fit-content;
position: relative;
display: flex;
margin-left: auto;
}
.mentionBubble [data-testid="action-row-container"] > div:first-child {
position: relative;
column-gap: 0;
}
.mentionBubble > div > div > div > div {
flex-direction: row-reverse;
}
.mentionBubble [data-testid="action-row-container"] > div:last-child > button:last-child {
height: 48px;
width: 48px;
}
.mentionBubble [data-testid="action-row-container"] > div:last-child {
margin-right:-48px;
}
.mentionBubble [data-testid="action-row-container"] > div:first-child p {
position: absolute;
top: -10px;
right: -10px;
background-color: crimson;
color: white;
width: 25px;
height: 25px;
font-size: 0.85rem;
font-weight: 900;
border-radius: 50%;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
Ya, that CSS was only viable in Classic apps. There’s no way to do this nowadays because CSS can’t reference app data☹️
2 Likes
