Hi community, I'm injecting HTML into a notification node via a template node. The HTML consists of a simple table, and the formatting works correctly in Node-RED version 1.18.0 (see Image 1). However, after upgrading to version 1.20.0, the formatting is no longer applied (see Image 2).
Additional Information:
- Node-RED Version: 4.0.5
- Node.js Version: 18.20.4 (upgraded to 22.12.0)
- FlowFuse Dashboard Version: 1.18.0 (upgraded to 1.20.0)
Issue:
The Node-RED flow:
[{"id":"2d9c27fd13197f02","type":"ui-notification","z":"e023041b269bbaa8","ui":"0ee9ba68ec550cf9","position":"center center","colorDefault":true,"color":"#000000","displayTime":"200","showCountdown":false,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":false,"confirmText":"Confirm","raw":true,"className":"diag_popup","name":"popup-sensor-data","x":1910,"y":500,"wires":[[]]},{"id":"ddc1479c9e347862","type":"template","z":"e023041b269bbaa8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<style>\n div.v-snackbar--variant-elevated{\n width: 90vw;\n max-width:800px;\n min-width: 400px;\n }\n div.v-snackbar--variant-elevated > div.v-snackbar__content{\n width: 100%;\n }\n div.v-snackbar--variant-elevated > .v-snackbar__actions button{\n background-color: #aaa;\n }\n div.v-snackbar--variant-elevated table {\n width: 100%;\n border-collapse: collapse; \n }\n div.v-snackbar--variant-elevated th{\n text-align: left;\n }\n div.v-snackbar--variant-elevated td {\n border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);\n padding: 8px;\n text-align: left;\n }\n div.v-snackbar--variant-elevated tr{\n border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);\n }\n</style>\n<div class=\"diag_wrapper\">\n <h2>Address: {{stored.address}}</h2>\n <br>\n <table>\n <thead>\n <tr>\n <th>Counter</th>\n <th>Type</th>\n <th>RSSI</th>\n <th>Date/Time</th>\n </tr>\n <br>\n </thead>\n <tbody>\n <tr>\n <td>{{stored.counter.0}}</td>\n <td>{{stored.type.0}}</td>\n <td>{{{stored.rssi.0}}}%</td>\n <td>{{stored.date.0}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.1}}</td>\n <td>{{stored.type.1}}</td>\n <td>{{{stored.rssi.1}}}%</td>\n <td>{{stored.date.1}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.2}}</td>\n <td>{{stored.type.2}}</td>\n <td>{{{stored.rssi.2}}}%</td>\n <td>{{stored.date.2}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.3}}</td>\n <td>{{stored.type.3}}</td>\n <td>{{{stored.rssi.3}}}%</td>\n <td>{{stored.date.3}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.4}}</td>\n <td>{{stored.type.4}}</td>\n <td>{{{stored.rssi.4}}}%</td>\n <td>{{stored.date.4}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.5}}</td>\n <td>{{stored.type.5}}</td>\n <td>{{{stored.rssi.5}}}%</td>\n <td>{{stored.date.5}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.6}}</td>\n <td>{{stored.type.6}}</td>\n <td>{{{stored.rssi.6}}}%</td>\n <td>{{stored.date.6}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.7}}</td>\n <td>{{stored.type.7}}</td>\n <td>{{{stored.rssi.7}}}%</td>\n <td>{{stored.date.7}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.8}}</td>\n <td>{{stored.type.8}}</td>\n <td>{{{stored.rssi.8}}}%</td>\n <td>{{stored.date.8}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.9}}</td>\n <td>{{stored.type.9}}</td>\n <td>{{{stored.rssi.9}}}%</td>\n <td>{{stored.date.9}}</td>\n </tr>\n </tbody>\n </table>\n</div>\n","output":"str","x":1730,"y":500,"wires":[["2d9c27fd13197f02"]]},{"id":"8ced1b1629ae3bd0","type":"inject","z":"e023041b269bbaa8","name":"","props":[{"p":"stored","v":"{\"address\":\"00:13:a2:00:42:53:64:53\",\"counter\":[\"-\",3,\"-\",3,\"-\",3],\"type\":[\"RUN\",\"sensor_data\",\"RUN\",\"sensor_data\",\"RUN\",\"sensor_data\"],\"rssi\":[null,null,null,null,null,null],\"date\":[\"12/9/2024, 7:57:55 PM\",\"12/9/2024, 7:57:55 PM\",\"12/9/2024, 7:58:20 PM\",\"12/9/2024, 7:58:20 PM\",\"12/9/2024, 7:59:53 PM\",\"12/9/2024, 7:59:53 PM\"]}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1610,"y":500,"wires":[["ddc1479c9e347862"]]},{"id":"0ee9ba68ec550cf9","type":"ui-base","name":"ncd-ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"}]
Any assistance would be greatly appreciated.
