Custom table collapses on page refresh

Dashboard
1

I have an ui_template node which draws a custom table. It works fine, but if I refresh the web page, all rows (but <th>) collapse and I don't see them anymore. The rows are there (I can se them in Web Inspector) but they are not showing on the page. To show them I have to switch to another Dashbaord tab and then switch back again.
Very weird.
This is the template code:

<style>
#devices {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;

}

#devices td, #devices th {
  border: 1px solid #ddd;
  padding: 8px;
}


#devices tr:nth-child(even){background-color: #f2f2f2;}

#devices tr:hover {background-color: #ddd;}

#devices th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

.green {color:#04AA6D;}
.red {color:red;}
</style>


<table id="devices">
    <tr style="font-size:smaller">
        <th>Device Name</th>
        <th>MQTT topic</th>
        <th>IP Address</th>
        <th>WiFi AP</th>
        <th>Strength</th>
        <th>Telemetry</th>
        <th>Firmware</th>
        <th>Uptime</th>
        <th>Status</th>
        <th>Web UI</th>
    </tr>
    <tr ng-repeat="(k,v) in msg.payload" 
    style="font-size:smaller; border:1px dotted">
        <td><b>{{v.name}}</b></td>
        <td>{{k}}</td>
        <td>{{v.ip}}</td>
        <td>{{v.ssid}}</td>
        <td>{{v.signal}}%</td>
        <td>{{v.teleperiod}} min.</td>
        <td>{{v.fw}}</td>
        <td>{{v.uptime}}</td>
        <td ng-class="{green: v.status=='Online', red: v.status=='Offline'}">{{v.status}}</td>
        <td><a href="http://{{v.ip}}" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a></td>
    </tr>
</table>
2

You could try adding a ui-control node and cecking the output of it and using that to trigger a rebuild of the table.

3

There is already an ui_control which injects a "change" message when the browser is refreshed, triggers a function which retrieves the table data and send it to the template. In such a case, the table outputs the input object correctly.

As I said, the weird thing is that the table rows are there, in the code (inspected), but they are all collapsed.

The same behavior if I remove the ui_control. As soon as the page is refreshed, all the rows are collapsed. I thought about a wrong CSS style, but looking at it, it is very trivial.

4

I found that it is the Dashboard container which doesn't grow. Maybe because the container is drawn before the table, so it shrinks to a very short table. Look at the image:

Schermata 2022-06-14 alle 15.51.38
Schermata 2022-06-14 alle 15.51.382186×330 89.8 KB

I can scroll the table.

5

have you got a sample flow showing the issue?

7

Here it is a sample flow. Inject to populate the table, then refresh the page and the table will collapse.

[{"id":"f76226824f0b9691","type":"inject","z":"1c508b727f857010","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"aspiratore_camera\":{\"status\":\"Online\",\"state\":0,\"name\":\"Aspiratore stanzino\",\"teleperiod\":60,\"fw\":\"11.1.0(sensors)\",\"uptime\":\"1T01:12:08\",\"ip\":\"192.168.1.63\",\"ssid\":\"Vodafone-saltydog\",\"signal\":60},\"deumidificatore\":{\"status\":\"Online\",\"state\":0,\"name\":\"Deumidificatore\",\"teleperiod\":10,\"fw\":\"11.1.0(sensors)\",\"uptime\":\"1T06:25:55\",\"ip\":\"192.168.1.64\",\"ssid\":\"Vodafone-saltydog\",\"signal\":64},\"contact-1\":{\"status\":\"Online\",\"state\":0,\"name\":\"Contatto porta\",\"teleperiod\":10,\"fw\":\"11.1.0(lite)\",\"uptime\":\"1T01:12:49\",\"ip\":\"192.168.1.66\",\"ssid\":\"Vodafone-saltydog\",\"signal\":54},\"irr-laterali\":{\"status\":\"Online\",\"state\":0,\"name\":\"Irrigatori laterali\",\"teleperiod\":60,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"1T01:15:02\",\"ip\":\"192.168.1.61\",\"ssid\":\"Saltydog_1ext\",\"signal\":74},\"irr-centrale\":{\"status\":\"Online\",\"state\":0,\"name\":\"Irrigatore centrale\",\"teleperiod\":60,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"1T01:14:41\",\"ip\":\"192.168.1.60\",\"ssid\":\"Saltydog_1ext\",\"signal\":76},\"ventilatore\":{\"status\":\"Online\",\"state\":0,\"name\":\"Ventilatore\",\"teleperiod\":10,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"0T01:14:32\",\"ip\":\"192.168.1.62\",\"ssid\":\"Saltydog_1ext\",\"signal\":78},\"cancello\":{\"status\":\"Online\",\"state\":0,\"name\":\"Apricancello\",\"teleperiod\":10,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"1T01:13:18\",\"ip\":\"192.168.1.67\",\"ssid\":\"Saltydog_1ext\",\"signal\":90},\"pala-soffitto\":{\"status\":\"Online\",\"state\":0,\"name\":\"Pala soffitto\",\"teleperiod\":5,\"fw\":\"11.1.0(sensors)\",\"uptime\":\"1T01:16:30\",\"ip\":\"192.168.1.68\",\"ssid\":\"Saltydog_1ext\",\"signal\":100},\"ac-salone\":{\"status\":\"Online\",\"state\":0,\"name\":\"AC Salone\",\"teleperiod\":10,\"fw\":\"11.1.0(ir)\",\"uptime\":\"1T01:14:12\",\"ip\":\"192.168.1.57\",\"ssid\":\"Saltydog_1ext\",\"signal\":100},\"striscialedsalone\":{\"status\":\"Online\",\"state\":0,\"name\":\"Striscia Led Salone\",\"teleperiod\":10,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"1T01:11:47\",\"ip\":\"192.168.1.51\",\"ssid\":\"Saltydog_1ext\",\"signal\":100},\"PAB-plug\":{\"status\":\"Online\",\"state\":0,\"name\":\"PAB-plug\",\"teleperiod\":60,\"fw\":\"11.1.0(tasmota)\",\"uptime\":\"3T22:47:48\",\"ip\":\"192.168.1.70\",\"ssid\":\"Saltydog_1ext\",\"signal\":100},\"luxmetro\":{\"status\":\"Online\",\"state\":0,\"name\":\"Luxmetro\",\"teleperiod\":1,\"fw\":\"11.1.0(sensors)\",\"uptime\":\"1T01:17:24\",\"ip\":\"192.168.1.71\",\"ssid\":\"Vodafone-saltydog\",\"signal\":70},\"monitoraf\":{\"name\":\"Monitor Antifurto\",\"ip\":\"192.168.1.65\",\"signal\":96,\"ssid\":\"Saltydog_1ext\",\"status\":\"Online\"}}","payloadType":"json","x":310,"y":660,"wires":[["cb0f021ed039bdba"]]},{"id":"cb0f021ed039bdba","type":"ui_template","z":"1c508b727f857010","group":"3176bcdb2f85e1cd","name":"custom table","order":6,"width":0,"height":0,"format":"\n<style>\n#devices {\n  font-family: Arial, Helvetica, sans-serif;\n  border-collapse: collapse;\n  width: 100%;\n\n}\n\n#devices td, #devices th {\n  border: 1px solid #ddd;\n  padding: 8px;\n}\n\n\n#devices tr:nth-child(even){background-color: #f2f2f2;}\n\n#devices tr:hover {background-color: #ddd;}\n\n#devices th {\n  padding-top: 12px;\n  padding-bottom: 12px;\n  text-align: left;\n  background-color: #04AA6D;\n  color: white;\n}\n\n.green {color:#04AA6D;}\n.red {color:red;}\n</style>\n\n\n<table  id=\"devices\">\n    <tr style=\"font-size:smaller\">\n        <th>Device Name</th>\n        <th>MQTT topic</th>\n        <th>IP Address</th>\n        <th>WiFi AP</th>\n        <th>Strength</th>\n        <th>Telemetry</th>\n        <th>Firmware</th>\n        <th>Uptime</th>\n        <th>Status</th>\n        <th>Web UI</th>\n    </tr>\n    <tr ng-repeat=\"(k,v) in msg.payload\" \n    style=\"font-size:smaller; border:1px dotted\">\n        <td><b>{{v.name}}</b></td>\n        <td>{{k}}</td>\n        <td>{{v.ip}}</td>\n        <td>{{v.ssid}}</td>\n        <td>{{v.signal}}%</td>\n        <td>{{v.teleperiod}} min.</td>\n        <td>{{v.fw}}</td>\n        <td>{{v.uptime}}</td>\n        <td ng-class=\"{green: v.status=='Online', red: v.status=='Offline'}\">{{v.status}}</td>\n        <td><a href=\"http://{{v.ip}}\" target=\"_blank\"><i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a></td>\n    </tr>\n</table>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":660,"wires":[[]]},{"id":"3176bcdb2f85e1cd","type":"ui_group","name":"test","tab":"8baef7542f2ef651","order":2,"disp":true,"width":"20","collapse":false,"className":""},{"id":"8baef7542f2ef651","type":"ui_tab","name":"Dispositivi","icon":"dashboard","disabled":false,"hidden":false}]
8

Ha this is interesting because the issue does not show up on my Mac running Safari, but does show up on Chrome and Firefox!

What version of NR are you running and what browser are you running?

9

I am running latest NR 2.2.2. Browsing from a Mac M1 with Firefox and Chrome.
But the issue happens also on my Android phone.ù

EDIT: I tried with Safari too, and the problem is still there!

10

In Chrome try doing a command shift R and see what happens. The table reloads for me (that is a forced reload)

How do you do the refresh in Safari?

I'm also using a Mac M1 and I'm running the NR (v3.0.0 beta-2) on my Mac. Let me see what happenes if I swap back to V2.2.2

11

Well using NR v2.2.2 I have no problem in Safari

Also, are you testing with the flow you gave me or someting a bit bigger?

12

With the same flow. I refresh the page with cmnd-R. No changes with cmnd-shift-R

13

The same on iPad and Safari too

14

Could it be a dashboard bug (v.3.1.7)?

15

Works fine on my iPad.
Interesting, I’m on 3.1.3 let me upgrade and see what happens

16

All right now i have reproduced in on my iPad and know what it was. In your example flow I set the inject node to fire on deploy with ‘repeat’ set to none. Why this causes it to keep the table on the page refresh I have know idea.

Give it a try and see if it keeps the table on refreshes on your mac and iPad.

17

I have set the inject node to fire on deploy and repeat to "none". Same problem when I refresh the page.
In addition, in my production flow I don't have the inject node, but a function which creates the same object I have put in the inject to let you test it.

18

I have opened an issue on dashboard's github.
Thank you for the time you have devoted to my problem!

1 Like
19

I have found that to avoid the weird behaviour, the table must be included in a fixed height div .

20

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