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

[jkinsey]

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!

<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;
}

[iamtomgray]

Hi @jkinsey, I hope this provides some context.

Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks

Some advanced users use custom HTML/CSS inside the Rich Text component to style their apps. This has always been unsupported and discouraged: [CleanShot 2022-07-05 at 12.28.06@2x] 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…

[ThinhDinh]

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

[jkinsey]

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.

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

[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!

[ThinhDinh]

@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.

[ThinhDinh]

Try this instead.

[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;
}

[jkinsey]

It works! Thank you so much!

[ThinhDinh]

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

[jkinsey]

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.

[ThinhDinh]

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.

[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.

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.

[ThinhDinh]

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

[jkinsey]

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.

[Jeff_Hager]

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.

[jkinsey]

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?

[Jeff_Hager]

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.

[jkinsey]

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

[ThinhDinh]

I’ll have a demo app for you later.

[ThinhDinh]

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

[jkinsey]

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?