How to make a row in a list look "selected" (mobile)


I need to change CSS of a clicked list item. To have the effect of selection. (an alternative would be to use a dropdown, but I don´t want to)

I have the code here ( In this fiddle works ok, but in outsystems, I need to click twice evertytime to highlight.

In outsystems, the code of javascript is inside a javascript of a client action (onclick event in list item)

I copy the idea from

Any help?


Discover something !

Changed the code a little bit. Almost working. The first click does nothing, but the next ones work normal.

 $('div[id*=ListItem2]').on('click' , function (evt){

It is bubbling up. How can I prevent this?


Hi Luan,

Here's how I managed to achieve this: 

  1. Put a Container in the List widged wrapping all of its contents and set its class to "listClick".
  2. In the screen's "OnReady" event, add a javascript node with the following code:


    The "background" class should contain the CSS you wish to use to highlight the item. The "removeClass" statement resets all rows so that only one at a time appears selected. If you don't need that behavior, just remove that line.

Thanks for response.

But didn´t work. File attached with your example, but doesnt work.

What am I doing wrong?

You forgot to attach the file.

sorry, here it goes

well i dont know why the attach is not working.

here is a link


After some tries, it worked.

I change the event to OnRender, instead of OnReady. And the it worked!

My code or your code, both works.

Thanks Aurelio Santos!

Here is the link if anyone is interested:

Hi Luan,

I was playing around with this a bit more and found that both of our methods were unreliable. They'd work the first time the screen was loaded, but if I navigated to a different screen and then went back, they'd stop working. So I found a better way of doing it: create an action to handle the screen's "On Render" event and then use this code inside a JavaScript element:

$('.listClick').click(function(evt) {

Very nice! I have another question.

Since this script is kiiling the propagation. I´m not able to run any screen action inside a row of list, to get the Id of the row, I mean the Entity Identifier. (because the list is dynamic)

Is there a way to call an action inside this click function, but that get the Identifier of the row?

For example, I want to be able exclude a row (and from database), but only the row with the .selected CSS.

Glad I fix it.

I don´t know if it´s the best way to do it, but worked.

I needed to create another container with a CSS hidden button, which has onclick event with a client action. So doing this the event is called from javascript.

And fix the action OnRender to:

$('#listaProc').on('click', '.listClick', function(e){
        $(this).parent().find('.listClick2 button[id*=botaohidden1]').click();
    if ($('#listaProc .listClick').hasClass('selected')){
     return false;  
    } else {

I just don´t like the IF statement in this code. Is someone knows how to implement better I would appreciate. Thanks

This is an old thread but i just came across it...

I think the solution fot this is just some pure css like this:

.list-items:active {
    background-color: #f2f2f2; /* or any color you want*/

For me its working in both Android and iOS