Background of container selected in listview

đź’¬ App Building
1

Hi, I'm working on a task where, when a container is selected, it should be highlighted with a green background in the list view.

I've already set a selectedItem.id, but the background doesn't change as expected.

Can someone help me figure out what I might be missing to apply the green background on selection?

image
image451Ă—191 7.05 KB

2

Interesting; i just ran into something but not sure if it's 1:1 with your example.

For mine, I'm trying to conditionally set the background on a container which acts as the main repeatable element in my list view. I.e. it contains all the other repeatables.

If i set a color straight up, it works on all items. But I only want at most one to be styled; i do this by matching the underlying repeatable item's id to something external based on user input.

The logic is right; i can see the ternary conditional working properly on input focus preview, but it only renders on the page on hover of the singled out item, and only in Edit mode. Bizarre!

Screenshot 2025-08-07 at 1.48.56 PM
Screenshot 2025-08-07 at 1.48.56 PM451Ă—299 15.1 KB

Screenshot 2025-08-07 at 2.03.24 PM

3

Hey @vonhatphuong thank you so much for patiently waiting! Can you share your code in a screenshot or a loom video so I can better understand what you’re trying to achieve?

My initial thought is that it might be easier to use the Table component, since it supports writing JavaScript for changing row colors. If you can describe your use case a bit more, that would be amazing!

4

Hey @dguzzo, would you mind sharing where you’re writing your ternary conditional as well? That way I can take a closer look, thanks!

5

i'm putting the logic for conditionally choosing a color string in the right Inspector pane where one inputs a dynamic style for the list-item container's background color. (you can sorta see it in sandwiched between my first screenshot and video)

hopefully that clears it up but otherwise i can try to get a better screenshot when i have more time :+1:

6

Hi @vonhatphuong, @dguzzo

From your description, it sounds like you want the selected container in your ListView to be highlighted with a green background. Here’s how you can achieve this:

  1. Create a temporary variable – use it to store the index (or ID) of the selected container.
  2. Add an event handler – on the container’s click event, set this variable to the index value ({{ i }}).
  3. Apply conditional styling – use the variable to compare with the current container’s index and update the background color. For example:
{{ i === listviewIndex.value ? '#008000' : '#FFF' }}

This way, when you click a container, its index will be stored, and the corresponding container will display with the highlighted background.

Below attached is a reference video showing this behavior:

7

thanks for the potential workaround, Widle. however, my case doesn't involve clicking (as per your #2)—it's about providing logic to highlight the list item instance by index due to an external factor: which point is selected on a Mapbox component.

8

Hey @dguzzo, it’s been a while. Just checking in to see if you’ve found a solution on your end? Let me know! :pray:

9

Appreciate you checking in, @ChiEn ! I haven’t looked into this further; I only had this set up in a one-off situation and it’s not critical to the single app where I use it. So I’m inclined to leave it be as-is.

1 Like
10

Hey happy new year @dguzzo :tada: Sounds good, thanks for getting back to me! Feel free to start another topic if you have any other questions!

1 Like