Dashboard template node - CSS style does not work


#1

I'm quite new to Node-RED, and I'm not a web developer, I have just basic knowledge of HTML/CSS/JavaScript.

I'm trying to write my own HTML/CSS code in a dashboard template node, if the HTML part is ok, CSS styling simply does not apply!

Even the basic example of the template node does not work, I paste it here just for sake of clarity

<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <p ng-style="{color: (msg.payload || 0) % 2 === 0 ? 'green' : 'red'}">
    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </p>
</div> 

Adding this to the dashboard and connecting an inject node in front of it, when injecting timestamps the text color is always white, am I doing something wrong?

Thanks


#2

Just to clarify, here is how the test flow and its dashboard output look


as you can see, the "even" text is white, and not green as the CSS style asks


#3

And what value are you sending to the node?


#4

Timestamps, each time I manually inject, the text in the dashboard becomes "even" or "odd" accordingly to the current timestamp.


#5

Try this. Go to the dashboard configuration panel. Select the option: angular theme in UI template


#6

That worked! I would never have been able to solve without your help, thanks!


#7

Thanks for spotting this - I will fix the example to work again.

<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
      {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </font>
</div>