# Custom table collapses on page refresh

**URL:** <https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904>\
**Category:** Dashboard\
**Created:** [14 June 2022 11:09 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904 "2022-06-14T11:09:37Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 11:09 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/1 "2022-06-14T11:09:37Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 13:40 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/2 "2022-06-14T13:40:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 13:44 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/3 "2022-06-14T13:44:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 13:52 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/4 "2022-06-14T13:52:04Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b7d59cfa340a28726e0b31b8ceeb32295009cb3f.png)

I can scroll the table.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 13:54 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/5 "2022-06-14T13:54:47Z")

</div>

have you got a sample flow showing the issue?

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 14:11 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/7 "2022-06-14T14:11:37Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 16:16 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/8 "2022-06-14T16:16:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 16:19 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/9 "2022-06-14T16:19:00Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 16:32 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/10 "2022-06-14T16:32:28Z")

</div>

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?

> [@fmarzocca](#):
>
> EDIT: I tried with Safari too, and the problem is still there!

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 16:36 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/11 "2022-06-14T16:36:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 16:43 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/12 "2022-06-14T16:43:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 16:59 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/13 "2022-06-14T16:59:34Z")

</div>

The same on iPad and Safari too

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 17:20 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/14 "2022-06-14T17:20:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 20:00 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/15 "2022-06-14T20:00:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 June 2022 20:06 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/16 "2022-06-14T20:06:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 20:19 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/17 "2022-06-14T20:19:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [14 June 2022 20:20 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/18 "2022-06-14T20:20:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [15 June 2022 11:54 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/19 "2022-06-15T11:54:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 June 2022 11:55 UTC](https://discourse.nodered.org/t/custom-table-collapses-on-page-refresh/63904/20 "2022-06-29T11:55:16Z")

</div>

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