# CSS help notification on incomplete information (inline list)

**URL:** <https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105>\
**Category:** Ask for Help\
**Created:** [November 6, 2021, 6:46am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105 "2021-11-06T06:46:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 6:46am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/1 "2021-11-06T06:46:31Z")

</div>

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)?

 ![Untitled](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8bab194a2d3e892f07a69c57c8a67a3294cf7137.png)

Thanks

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 6, 2021, 7:05am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/2 "2021-11-06T07:05:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 7:30am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/3 "2021-11-06T07:30:24Z")

</div>

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

---

<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 6, 2021, 7:31am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/4 "2021-11-06T07:31:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 6, 2021, 7:37am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/5 "2021-11-06T07:37:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 7:40am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/6 "2021-11-06T07:40:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 7:41am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/7 "2021-11-06T07:41:54Z")

</div>

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

---

<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 6, 2021, 7:42am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/8 "2021-11-06T07:42:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 7:47am UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/9 "2021-11-06T07:47:31Z")

</div>

Thanks that would be awesome!!!  
I am using this emoji as an image: 👨‍👩‍👧‍👦for the icon

---

<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 6, 2021, 12:47pm UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/10 "2021-11-06T12:47:53Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![ybastami](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ybastami/32/8114_2.png) [@ybastami](https://community.glideapps.com/u/ybastami)\
**Post date:** [November 6, 2021, 3:17pm UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/11 "2021-11-06T15:17:30Z")

</div>

Amazing!!! Thanks!!!

---

<div class="post-metadata">

**Author:** ![MIKAHEL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikahel/32/25039_2.png) [@MIKAHEL](https://community.glideapps.com/u/MIKAHEL)\
**Post date:** [November 6, 2021, 3:36pm UTC](https://community.glideapps.com/t/css-help-notification-on-incomplete-information-inline-list/34105/12 "2021-11-06T15:36:10Z")

</div>

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.

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

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/0730b3586dcbbe142d19b10b4863d48029ec5610.png)

in this case is SELECTED

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