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?
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
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 -
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
@Aman Singh Rajput
This changes the background when I hover over it, but not when it is selected and the mouse cursor is elsewhere.
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: