The ProblemIn my case, I was trying to make the labels of a radio button group appear disabled. Only the buttons themselves would look disabled, but the labels looked the same as when the control was enabled.
|I don't feel that there is enough distinction between Enabled on the left, and Disabled on the right.|
|XPages makes it easy for you to specify a disabled styleClass|
|For some reason the "color" is overwritten by OneUI|
The way to override is to add “!important” after the attribute you don’t want to be overwritten. In my case, the only attribute that wasn’t behaving was the color. After I added !important, it worked exactly like I wanted. In the right picture above shows what this one change gives you.
Here is the After code:
color: #AFAEB5 !important;
The Finished Result
|Enabled on the left, disabled on the right. It is easy to distinguish which is which.|
Final ThoughtsPerhaps this is old news to some who read this. Though, in my office, none of the four XPages developers knew about this before. I hope that this helps other XPagers who wrestle with OneUI.
I will add that, this should be something that is used sparingly. In my case, only the specific class of “.radio-disabled” is using it. I can see that you could really mess your UI by overusing !important. Here is a related article called “Don’t Use !important” that explains some of the pitfalls.