# Glide Lists Not Working Properly - Unable to target very basic CSS, and list disappears randomly

**URL:** <https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598>\
**Category:** Ask for Help\
**Created:** [August 24, 2022, 2:55am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598 "2022-08-24T02:55:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 24, 2022, 2:55am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/1 "2022-08-24T02:55:03Z")

</div>

Hi All -

It seems that lists aren’t working at all for me with Glide.

I’m trying to target specific items of a list with CSS to change the background color of each list item, but for whatever reason it suddenly broke. I’ll paste the code below in case there’s an issue with that. Not sure if this could be connected, but I just changed a ton of values in another sheet that this sheet references, and elements briefly disappeared from the Glide Tables.

To test, I copied this code out of the sheet and just made a Rich Text element with this code directly below the list. It still didn’t work. I’ve had this problem in other apps as well, and the only solution I’ve found was to fully create a new app and switch the URL over.

Furthermore, I created a new tab with an untargeted inline list. It appeared for a few minutes, however, when I added more elements, everything on the page disappeared and when scrolling up, certain elements would randomly appear.

I’ve never seen this before and have no clue what’s happening. I’m not sure how to get this running again, so any help is appreciated!

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

[data-test='list-item'] .textStyle {
font-weight: 650;
color: black;
font-size: 20px;
}

[data-test='list-item'] .textDetailStyle {
font-size: 16px;
color: black;
font-weight: 300;
margin-right: 0px;
margin-top: -3.5px;
}

[data-test='list-item'] .textCaptionStyle {
font-size: 21px;
color: black;
margin-left: 77%;
margin-top: -26.5px;
font-weight: 700;
text-align: right;
}

[data-test='list-item'] {
background: teal;
border-radius: 12px;
margin-bottom: 5px;
margin-left: 9px;
margin-right: 9px;
padding-top: 0px;
padding-bottom: -8px;
border-width: 3px;
border-color: #ffffff;
margin-bottom: 0px;
}

[data-test='list-item']::after {
display: none;
}

[data-test='list-item'] .navigationIcon {
display: none;
}

[data-test='list-item'] .navigationIcon {
display: none;
}[data-test='app-vertical-list'] .selected-item-list-item-1{
background: green !important;
}[data-test='app-vertical-list'] .selected-item-list-item-2{
background: green !important;
}

```

---

<div class="post-metadata">

**Author:** ![iamtomgray](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/iamtomgray/32/47662_2.png) [@iamtomgray](https://community.glideapps.com/u/iamtomgray)\
**Post date:** [August 24, 2022, 9:03am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/2 "2022-08-24T09:03:23Z")

</div>

Hi @jkinsey, I hope this provides some context.

> [@warning Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks](https://community.glideapps.com/t/unsupported-html-css-in-the-rich-text-component-will-completely-break-in-the-coming-weeks/43931):
>
> Some advanced users use custom HTML/CSS inside the Rich Text component to style their apps. This has always been unsupported and discouraged: In the coming weeks we’re rolling out significant changes to Glide’s architecture to make apps faster, and eventually more compatible with new features introduced in Glide Pages. This will completely break all custom HTML/CSS in the Rich Text components. If you rely on this, we strongly encourage you to stop using i…

---

<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:** [August 24, 2022, 9:04am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/3 "2022-08-24T09:04:52Z")

</div>

> [@jkinsey](#):
>
> I’m trying to target specific items of a list with CSS to change the background color of each list item, but for whatever reason it suddenly broke.

Your code suggests you’re targeting all items in a list, is that what you mean (instead of changing each item in a different way based on some logic), I just want to confirm.

Can you give me a screenshot of how it looks right now?

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 24, 2022, 1:47pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/4 "2022-08-24T13:47:19Z")

</div>

I attached a screenshot to this reply. I had to cover the data, as it is sensitive information, but you can still make out the styling of each list item.

 ![IMG_4232](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bf93452f8718439801d8acbef5828087add3fa64.jpeg)

I was trying to color each item in the list based on certain logic. I had been using…

```auto
[data-test='app-vertical-list'] .selected-item-list-item-1{
background: green !important;
}

```

… which is at the bottom of the code block. Despite this code, it’s still making the background of all of my items the color defined in `[data-test='list-item']`

Also, after doing some experimentation (making a new app on a new account with a single inline list with about 60 items, which still glitched out), I think part of it is a bug with Glide- I created a fully new account and a new project and still experienced the glitch in the third “paragraph” of my app.

Thanks!

---

<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:** [August 25, 2022, 12:34am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/5 "2022-08-25T00:34:21Z")

</div>

![Lucas x Thinh Dinh - Designs · Glide 2022-08-25 at 7.33.01 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/4416f49a5e037896df3c076fc435331727ce8656.png)

> [@jkinsey](#):
>
> … which is at the bottom of the code block. Despite this code, it’s still making the background of all of my items the color defined in `[data-test='list-item']`

It’s not a bug, it’s because with the new structure, the items are not numbered like the way you used to have it. CSS is not officially supported, so you will have to find a way to change that based on the new DOM.

---

<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:** [August 25, 2022, 12:43am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/6 "2022-08-25T00:43:52Z")

</div>

Try this instead.

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

```auto
[data-test='app-vertical-list'] div[data-index="1"] div[data-test="list-item"] {
background: gold !important;
}

[data-test='app-vertical-list'] div[data-index="0"] div[data-test="list-item"] {
background: cyan !important;
}

```

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 12:55am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/8 "2022-08-25T00:55:51Z")

</div>

It works! Thank you so much!

---

<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:** [August 25, 2022, 12:58am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/9 "2022-08-25T00:58:00Z")

</div>

Gotta take a clear note that index for these inline lists start from 0, not 1. Hope it helps!

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 1:08am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/10 "2022-08-25T01:08:08Z")

</div>

Just one more question - I’m using a custom search box (I have a user specific column where the user enters their query) to search for items in the list, but when I search, the formatting stays static. Is there a way to fix this?

Eg, If I set list item 2 (giving it a value of 1) to be red, when I search for something, the second item in the search is red, regardless of what it’s set to in its resting state.

---

<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:** [August 25, 2022, 1:29am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/11 "2022-08-25T01:29:46Z")

</div>

I think that’s quite hard to achieve because you would have to determine what the search result’s index is to dynamically change your CSS.

Say your search result is index 8, then you would have to get the color of that index 8 and update that to the CSS.

That’s super complex.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 1:48am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/12 "2022-08-25T01:48:02Z")

</div>

Ah. I might try to mess around with that, but I doubt my CSS would be able to change fast enough, as it usually takes 5-10 seconds to change when the sheet makes an edit.

I might just end up disabling the coloring when the search box isn’t empty.

I guess theoretically, I could use the new item numbering by copying each ID over manually. It probably would be impractical with 100+ rows, but it’s worth a shot.

Thank you for the help with the other part! I’ll mark that as the solution.

---

<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:** [August 25, 2022, 11:26am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/13 "2022-08-25T11:26:36Z")

</div>

> [@jkinsey](#):
>
> Ah. I might try to mess around with that, but I doubt my CSS would be able to change fast enough, as it usually takes 5-10 seconds to change when the sheet makes an edit.

Shouldn’t you have a user-specific column there to make it update instantly?

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 1:57pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/14 "2022-08-25T13:57:11Z")

</div>

I have a user specific column for the value in the search bar, if that’s what you’re talking about.

I meant that when a color value changes in the CSS, it often takes a few seconds for it to update. If there’s a way to make this part update instantly, I had no clue this was possible. I still use a physical google sheet for this project, as I need some custom functions and some basic GoogleAppsScript, but large parts of it exist in glide tables.

---

<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:** [August 25, 2022, 2:52pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/15 "2022-08-25T14:52:20Z")

</div>

I would think that a combination of template columns and joined list columns in glide would allow you to generate that CSS instantly within glide.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 3:08pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/16 "2022-08-25T15:08:19Z")

</div>

I might’ve figured out a way to do it, I just need to ask one thing.

I made a new column in the table that displays 1 if the value matches the search key and a 0 if it doesn’t. If I’m somehow able to add the values up to that point, I could get it to work. Is there some sort of way in a GlideTable to add up all the values to the given row and display it in a column?

---

<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:** [August 25, 2022, 4:00pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/17 "2022-08-25T16:00:45Z")

</div>

Assuming you are using an IF column in glide to get that 1/0 value…I tend to use true/false instead of 1/0. It may work either way, but I’m not sure. Then use a rollup column to count all of the true/checked values in that IF column.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 25, 2022, 4:29pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/18 "2022-08-25T16:29:03Z")

</div>

I was using an IF column. Will that give the sum up to that row, or just display the same value in all rows?

Edit: I used a rollup column, but can only get the entire column to display the same value. Is there any way to have it display the sum as it goes down?

Here’s what I’m trying to accomplish- the left column is the IF column with the right representing the sum from the top to the current row

Eg  
0 | 0  
0 | 0  
0 | 0  
1 | 1  
1 | 2  
1 | 3  
0 | 3  
0 | 3  
1 | 4

---

<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:** [August 25, 2022, 11:58pm UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/19 "2022-08-25T23:58:14Z")

</div>

I’ll have a demo app for you later.

---

<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:** [August 26, 2022, 12:10am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/20 "2022-08-26T00:10:05Z")

</div>

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

Basically the setup is something like this.

- Add rowID
- Find the index of the row
- Have a numbers list
- Use JavaScript to derive a rolling sum

The app is copyable, you can find that setup in the “Things” table:

> **[Rolling Sum](https://rolling-sum-6bny.glideapp.io)**

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [August 26, 2022, 3:01am UTC](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598/21 "2022-08-26T03:01:12Z")

</div>

Sorry for asking so many questions - Is there any easy way to make the colors “stay put” with the data entries? I have my list sorted alphabetically, (the data in the table isn’t), which makes things turn the wrong color. Is there any way I can modify the code to make the styles stay connected to the data rows (either with CSS or JS), or is this unfeasible with the new DOM?

[Next page](https://community.glideapps.com/t/glide-lists-not-working-properly-unable-to-target-very-basic-css-and-list-disappears-randomly/47598.md?page=2)