Idea - OutSystemsUI CSS classes applied to input elements should be honored

OutSystemsUI CSS classes applied to input elements should be honored

New

OutSystems UI

Please upgrade the OutSystemsUI CSS Classes so the when a single property based CSS class is applied to an input element, that is has a has a higher precedence selector than that of the .form <input element> selector. A mixin could be added to the LESS/SAS application used in the generation of the OutSystemsUI CSS.

Example: margin-bottom-* CSS classes are not applied to an input element

HTML

<form>

</form>

Existing OutSystemsUI CSS

.form .dropdown, .form .search-input, .form input[data-input], .form textarea[data-textarea], .form [data-switch] { margin-bottom: var(--space-m); }

.margin-bottom-none { margin-bottom:var(--space-none);}

Fixed OutSystemsUI CSS options

.form .dropdown, .form .search-input, .form input[data-input], .form textarea[data-textarea], .form [data-switch] { margin-bottom: var(--space-m); }

.form :is( .dropdown, .search-input, input[data-input], textarea[data-textarea], [data-switch]).margin-bottom-none,

.margin-bottom-none { margin-bottom:var(--space-none);}

.form .dropdown, .form .search-input, .form input[data-input], .form textarea[data-textarea], .form [data-switch] { margin-bottom: var(--space-m); }

.margin-bottom-none { margin-bottom:var(--space-none) !important;}

27 Jan 2023

Ricardo Reis

Hi Erik,

I'm sorry, but I don't agree with your idea, as adding "!important" is a bad CSS practice and not the way to go on this one, in my opinion.

Your text area is not getting the "margin-bottom-none" style because, as you mentioned, there's a more specific selector applied to it, despite being declared before, which is the ".form textarea[data-textarea]". In your application, if you want your text area to have no margin to the bottom, you just need to override that selector in you app's theme and set whatever margin (as well as other styles) you wish.

Kind regards.

28 Jan 2023

erik berg

My idea showed two different CSS solutions to the same problem, one verbose and one terse.

My first example did not use !important; this example was verbose so I figured most people would not read it completely. ;)

My second example was terse by using !important, so that people would read it and hopefully understand the core idea.

Summary: A CSS class library is not going to be that useful if applying a class from that library to a common element is just going to be ignored by some hard coded CSS within that library.

12 May 2023