I created a custom style class to change the background color, as can be seen below.
When I try to apply it to a list item, it seems to ignore it unless this class is the only one there. If "list-item" is there first, that's all it recognizes. If it's not, then the background changes color. I'm not sure why I can't get it to change the color as well.
Hi Joseph,
Check the CSS specificity section from the below OutSystems Documentation to understand the priority :https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)
Also if need be you can use the !important rule of css so as to override with your style.
https://www.w3schools.com/css/css_important.asp
Will suggest to first check the specificity order and put your CSS in appropriate area for it to have higher priority. You can always used Inspect Element from the browser to understand from which css the background property is getting applied.
Hope this helps.
Regards,
Saurabh
I hope you are doing well.
You can refer this example,
Shubham
Hello @Joseph Kuhn ,
With the Inspect Element
you should check the class "list-item green-background" is applying or not.
I hope this will help you.
Thanks & Regards
Navneet Sharma
In addition to the previous comments. If you inspect the applied style rules for the List item element using the browser inspect feature you will observe that custom style definition is overridden with the default List item CSS style rules.
One of the approaches is to chain the default style class with your custom background style class as mentioned below.
CSS Snippet:
.list .list-item.green-background { background-color: #3cd35b; }
or else,
Add a custom style class to the List element
Chain the background style class with the custom List element style class as mentioned below
.list-cust-style .green-background { background-color: #3cd35b; }
Demo Screen: ListItemStyleTask
I hope this helps you!
Kind regards,
Benjith Sam
Thanks for the info. My goal is to always have the "list-item" class there, and only have the green background if a certain statement is met. I'm trying to implement it as an if statement (If(statement, "list-item green-background", "list-item") and that's where I'm running into trouble. Do you know how I can implement that?
In the ListItem StyleClasses property, you will have to conditionally add the custom background style class using the IF statement, as shown below.
I tried this already and it didn't work, which is why I asked the question. I'm not sure why I'm being downvoted for asking for help on the Outsystems forum when the response I was given is something I already tried that failed.
I didn't downvote any of your comments. I'm trying to help you the best I can, and I didn't share the sample oml in my first reply for the reason that you would give it a try by following the mentioned steps.
I have attached the oml for your reference to help you better. If it doesn't help, then it would be better if you can share a sample oml with your implementation, and we will be happy to help you :)