Different <style> in different templates nodes in the same dashboard

Dashboard
1

Hi guys,

I'm a newbie of NodeRed and I'm trying to build some HTML table using Template nodes.

I create many different table in dashboard using a template node for each one.

Now I would like to alternate color in rows and I use the following piece of code:

tr:nth-child(even) {
** background-color: #efecca;**
}

All works well but I note that this behavior are applied to all table in the dashboard even if the other nodes do not contain the code.

How is it possible to apply the only in one node?

Thanks

2

You need to target your css to the template more accurately. Typically you have a dive within your template to which you can assign an id=.... then get the css to target tr within that.

3

Thanks for reply!

Where is it possible to find an example?

Thanks again

Roberto

4

Similar post. Just add a wrapper around your code with unique class/ID

<style>
/* instead of current */
.foo {...}
/* add wrapper */
.unique-wrapper-name .foo {...}
</style>
<div class="unique-wrapper-name">
  <div class="foo">your actual code here</div>
</div>
5

I don't understand how modify my code below for apply style only in current node.
I'm very newbie...

<style>

tr:nth-of-type(odd) {
    background: white;
}

tr:nth-of-type(even) {
    background: yellow;
}

</style>

<table style="width:100%">
  <tr>
    <th>Codice</th>
    <th>Descrizione</th> 
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:100">
    <td>{{msg.payload[$index].CODICE}}</td>
    <td>{{msg.payload[$index].DESC}}</td>
  </tr>
</table>
6

I would add classes to your table, like so:

<table class="odd-rows-white even-rows-yellow" style="width:100%">

Then your CSS rules can target rows in only the tables that have those class, like so:

<style>
  table.odd-rows-white tr:nth-of-type(odd) {
    background: white;
  }
  table.even-rows-yellow tr:nth-of-type(even) {
    background: yellow;
  }
</style>

If you include these "custom" styles in a single ui_template node, and check the box for "Added to Site <head> section" then it can apply to all of your dashboard templates -- so you don't have to repeat the styles in every ui_template node.

1 Like