Change border color to text input node

Dashboard
1

Hi, I’ve been working on a home project using the dashboard ui nodes. I’ve been able to change dynamically the text and background colors of the buttons.

However, the one item I haven’t figured out is how to change the border color of the text input node.

I would like when the text input node receive a value greater than 30, then the border color to change to red.

Is it possible this with the text input node ?

Thank in advance!

2

try this, add a ui_template node with the following

<style>
.nr-dashboard-textinput {border: red 1px solid;}
</style>
3

zenofmund thanks for your help.
about my topic, I would like to change the border color of text input node dynamic, when I set a value greater than 25. Only then I want to change the border color to red. If the value is under 25 then the border color is the default.

[{"id":"21de8c1a.81d1e4","type":"ui_text_input","z":"af33edba.cb6b5","name":"","label":"Value 1","tooltip":"","group":"4e5b45cb.163f3c","order":16,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"","x":820,"y":680,"wires":[]},{"id":"8358eb06.7e9618","type":"inject","z":"af33edba.cb6b5","name":"","topic":"","payload":"12","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":490,"y":640,"wires":[["21de8c1a.81d1e4"]]},{"id":"fd6e60bf.63263","type":"inject","z":"af33edba.cb6b5","name":"","topic":"","payload":"25","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":490,"y":700,"wires":[["21de8c1a.81d1e4"]]},{"id":"4e5b45cb.163f3c","type":"ui_group","z":"","name":"Logo","tab":"68601be2.02e5e4","order":5,"disp":false,"width":"4","collapse":false},{"id":"68601be2.02e5e4","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":true}]

4

Sorry I missed the greater thatn 25 bit. Try this in the template node and you will have to send the value to this node.

<style>
.nr-dashboard-textinput {border: {{((msg.payload > 25)) ? 'red' : 'transparent'}} 1px solid;}
</style>
1 Like
5

thanks again. I appreciate your help.
The solution you send me work for all of the text input node in my form.
How can I use it, separately for every single text input node?:roll_eyes::roll_eyes::roll_eyes:

6

I knew that was going to be the next question....

You can put the text inputs in different groups and then use the ID of the group to target the CSS. The ID will be the tab name and group name with underscores in place of spaces. So in this example
27%20AM
if you wanted to apply it to the text input in group 2 you would use:
#UI_TESTS_Group_2 .nr-dashboard-textinput {border: {{((msg.payload > 25)) ? 'red' : 'transparent'}} 1px solid;}

1 Like
7

thanks for your help zenofmud :slightly_smiling_face:

8

Noted this is solved long ago. I'm am trying to do exactly the same thing but wondered if I can target the style down to the individual Text Input node under the same group... I tried to append to the ID but doesn't seem to work :roll_eyes:

#TabName_GroupName_NodeName

9

:innocent: I think I figured it out myself and will share it here in case someone is trying to do the same. Inspired by this thread: Dashboard element css classes - #13 by Steve-Mcl

To target an individual node, use its node id (found in the sidebar under the Info tab), e.g.

<style>
[node-id="00000x00.x000x0"] {border: {{((msg.payload === "something")) ? 'red' : 'transparent'}} 1px dashed;}
</style>

Hope it helps~

10

If you look a bit closer - at the end of that solution is this...

That comment was some time ago and custom classes are now supported in dashboard - so while the above still works (it is valid CSS after all) there is a more elegant solution using classes now.

hope that helps.