CSS help notification on incomplete information (inline list)

Hello
I am looking to add a red notification button around an inline list icon showing that the information was not complete
I can use a the rollup count to identify which one was not complete but how can I add the red notification circle next to the icon (like in the below pic)?

Thanks

It might be possible with CSS, but I’d imagine using Cloudinary to dynamically attach the dot would be easier (and safer).

But I think the simplest option of all would be to have two versions of each image - one with the dot, and one without. And then use a bit of if-then-else logic to determine which one to display.

1 Like

Thanks @Darren_Murphy I thought of using cloudinary but I am not too verse with it and I am using emoji icons as the images not sure if I can edit them over cloudinary

I agree using Cloudinary is the safest way, you can add a red dot layer to the right images on the fly, CSS for this use case is not easy and not safe.

Just a thought. If you have the option to add an Avatar to the list item, then you could maybe use the red emoji circle as the avatar image based on an IF condition. Only thing is that it would show on the lower left instead of the upper right of each tile. Could also use the Tag as a way to indicate a notification.

2 Likes

It’s a good idea, but tags are not available in my inline list options

1 Like

@Darren_Murphy , @ThinhDinh can you please point out to anyone who has done it, I am not sure how to do it over cloudinary

Can you send me one sample image you’re using? If I have time today I’ll construct a template URL for you.

2 Likes

Thanks that would be awesome!!!
I am using this emoji as an image: :family_man_woman_girl_boy:for the icon

image

I hope this works for you.

https://res.cloudinary.com/yourusername/image/fetch/l_fetch:aHR0cHM6Ly9kdW1teWltYWdlLmNvbS8xNTB4MTUwL0ZGMDAwMC9GRjAwMDA=,w_30,h_30,r_max,g_north_east,x_5,y_5/yourimagelink

Change yourusername and yourimagelink to the right things in your template column.

5 Likes

Amazing!!! Thanks!!!

Actually you can do easily using the AVATAR field.
Add a if then else field and in case of INCOMPLETE DATA put a Check MARK else nothing, see below in my sample.

Or in case you are using TILES (that have not the Avatar) then you can simply choose a different image.
for example, you have 1 column with the normal pic and another one you put the pic with the red dot, then in the IF THEN ELSE field you put the Image 1 or 2 accordingly with the incomplete option or not.
in this case INSTAGRAM is UNSELECTED

in this case is SELECTED

1 Like