Textbox conditional styling

0
Hi Guys,   Could you tell me the best way to do the following please? I have a textbox which outputs a value. If the value is less than zero I wish the color to be red else black. Should i use CSS or some sort of condition based approach.   Any help is appreciated. Thanks Adrian  
asked
6 answers
6

The input widgets should have read-only style "Text".  Then your added styling works

 

Additionally, I do not advise using inline styling. Better to use the existing classes.

In this case: 

text-danger

 

answered
4

It depends on your CSS skills because all can be done in CSS alone. For the simpel sollution I would use the show by condition widget to show or hide the right text box where one you give the custom style color: red;.

Regards,

Ronald

 

answered
2

Hi Adrian,

Assuming that you store the value as integer or decimal in a separate attribute.

You can put a condition for visibility (based on expression) on your text-box. Your exprsession will be $currentObject/value < 0. Put css on your textbox (color: red;), direct or via a class.

Place the same text-box attribute again in your page, also with  condition for visibility (based on expression), but now with expression $currentObject/value >= 0. Put css on this textbox (color: black;), direct or via class.

Hope this helps.

 

Regards,

Roel

answered
2

Hi Adrian,

You could create two containers with a text box in it, each with the same attribute. Use the visibility settings to decide when to display the first and when to display the second container. Each container and text box can then be styled according to the requirements.

 

Grt. Arjan

answered
2

Hi Guys,

Thanks for all your suggestion - it sounds like my on the right path but for some reason I'm not doing it properly.

I have two text boxes:

Both with visibility conditions - here is the one I wish to show red when negative values are present:

styling:

However it doesn't work?

Performing an inspect in chrome there are stylings that take priority:

 

here is my styling further down the list:

 

 

Any suggestions?

 

Best Regards

Adrian

answered
0

Its on the input widget - which is non-editable if that makes a difference?

answered