Change css parameters for message to display with ui_template

Dashboard
1

Try to use the "Template" (node-red-dashboard : ui_template) to display status/error messages.
To get different outlines (eg. change color) I come up with this code:

<!-- <div id="{{'my_'+$id}}" style="font-size:small"></div>    -->
<div id="{{'my_'+$id}}"></div>

<script>
    (function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
      $("#my_"+scope.$id).css("style","font-size:small");
    }
  });
})(scope);
</script>

Obviously it doesn't do what I expect, see first line. How to change the “div” statement and the jq call for it?

2

Finally, I found a solution that does what I want it to do:

<div id="{{'msg_'+$id}}" style="font-size:small;color:black"></div>

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      //console.log(` >${msg.payload}<   >${msg.topic}<  `);
      if (msg.topic === 'rowerror') {
        $("#msg_"+scope.$id).html(msg.payload).css("color","red");
      } else {
        $("#msg_"+scope.$id).html(msg.payload).css("color","black");
      }
    }
  });
})(scope);
</script>
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.