355
Views
5
Comments
Solved
How can I change the background color of list-item-selected
Question
Application Type
Reactive

How can I change the background color of list-item-selected? I have tried something like this, but unfortunately it does not work:

.desktop .list .list-item-selected
{  
background-color:red;
}


What do I need to change to make this work?

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello @Nickname12 

You can simply add a style on the list item attribute and manipulate it with the selection on click or on select of checkbox for multi-row selection.

I have created a sample for you for both type of scenarios, one where user select a row and single row color will change,

Another scenario is where users select multi-row and their color will change.We can handle this via a calculated attribute on a list on an aggregate where the list is bind to.

I am attaching a sample for you that can help you for the reference.

Sample - https://personal-ejuytnht.outsystemscloud.com/SampleForumPOCS/Sample_Selected_ROw

I hope this will help you 

Best Regards,
Tousif Khan


Sample_SelectedRow_Bg_Clr.oml
UserImage.jpg
Puja Rani
Solution

Hi,

since you need the items selected to remain highlighted when cursor is moved then you need to hold the selected list of items in a local variable and then define this as conditional class in the List item and add this CSS with important to over ride the default CSS class. Hope this works!.

Output looks like this - 



UserImage.jpg
Aman Singh Rajput

Hello @Nickname12,

Use the follow styling to change on hover background color of a list


.desktop .list .list-item:hover:not(.list-item-no-hover):not(.list-item-selected)

{  

background-color: red;

}


Hope this helped,


Regards,

Aman Singh Rajput

UserImage.jpg
Ron12

@Aman Singh Rajput 

This changes the background when I hover over it, but not when it is selected and the mouse cursor is elsewhere.

2019-09-30 07-35-56
Aurelio Junior

Hi,

The CSS you posted should work. If it doesn't, it's likely because there's some other CSS selector overwriting it.

What you can do to try to figure out what's happening is use your browser's developer tools to inspect what CSS is being applied to the element:

UserImage.jpg
Puja Rani
Solution

Hi,

since you need the items selected to remain highlighted when cursor is moved then you need to hold the selected list of items in a local variable and then define this as conditional class in the List item and add this CSS with important to over ride the default CSS class. Hope this works!.

Output looks like this - 



2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello @Nickname12 

You can simply add a style on the list item attribute and manipulate it with the selection on click or on select of checkbox for multi-row selection.

I have created a sample for you for both type of scenarios, one where user select a row and single row color will change,

Another scenario is where users select multi-row and their color will change.We can handle this via a calculated attribute on a list on an aggregate where the list is bind to.

I am attaching a sample for you that can help you for the reference.

Sample - https://personal-ejuytnht.outsystemscloud.com/SampleForumPOCS/Sample_Selected_ROw

I hope this will help you 

Best Regards,
Tousif Khan


Sample_SelectedRow_Bg_Clr.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.