Dashboard template node - CSS style does not work

Dashboard
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

38|709Ă—198
Screenshot 2018-12-01 at 15.09.38.png709Ă—198 20.2 KB

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

dashboard
dashboard.gif1434Ă—594 2.43 MB

1 Like
6

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

1 Like
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>