9
Views
3
Comments
Solved
OutSystemsUI Theme over ruling custom CSS
Question
Application Type
Reactive

Hello Forum, 


I have noticed something slightly odd recently regarding OutSystems UI theme. I first noticed that Dropdown inputs would not adhear to the column width that was set (and had to be put in containers to set width), but ive just noticed with a current implementation of a MasterDetail element for one of my apps. 


I first noticed that when selecting an item from the list, the background color would not change to what I had set in my Style sheet.


As you can see in the screen shot, the style of the selected list item (now all white), is being controlled by OutSystems UI, which is overwriting the CSS I have temporarily placed in the page's style sheet. 


This is what I would like to happen here: 


Just wondering if anyone else had noticed this, or potentially knew a reason for this to be happening.

I have a bit of a theme heirarchy which goes:
OutSystemsUI > Company_CSS which each app uses, then another app_CSS which is based on Company_CSS and i was under the impression that anything on Company_CSS or app_CSS or even page/inline css would overwrite OutSystemsUI.


Rank: #64
Solution

Hi Christopher,


What is happening is that your CSS class is less specific than the one of OutSystems UI.

You are using .desktop .list-item-selected whereas OutSystemsUI is using .desktop .list .list-item-selected.


Can you try using the code below (matching the classes specifity of OutSystems UI so your theme would override OutSystems UI's):


.desktop .list .list-item-selected,
.tablet.landscape .list .list-item-selected {

    background-color: var(--color-primary-lightest);
    color: var(--color-neutral-0);

}


Hope it helps.


Cheers,
João

Thanks João,


Silly mistake. Thanks for your help.


Wonder if the Dropdowns are similar, though i havent touched them. I created a new app to test the dropdown width issue: 

I created a drop down with Width 6 col:

Though it has been rendered as full width: 


Chris

Rank: #64

Hi Chris,


You're welcome. I'm glad I could help.

Regarding the combobox, yes, it is the same situation.

[data-dropdown] > div.dropdown-display, [data-dropdown] > select.dropdown-display from OutSystems UI is more specific, hence the width: 100% specified there is overriding your CSS on ThemeGrid_Width6.


Cheers,

João