orbeon

Orbeon Forms - How to enter Complex CSS Code


I was trying to use the IF/THEN/ELSE syntax in the Custom CSS Classes field within a control

For example, we wanted to change the background colour of a text depending on a radio-button setting:

So

I tried various code but I cant get it to work.

Any help would be most appreciated

PeteA


Solution

  • Custom CSS Classes support AVTs (Attribute Value Templates), which are XPath expressions enclosed in curly braces. Open the Control Settings for the control you want to style, and in Custom CSS Classes, use expressions like:

    my-priority-{//priority}
    

    Assuming you have another control named priority and its value is high, the current control will receive the class my-priority-high. You can then write CSS that sets the background to red when the class my-priority-high is present.