# Help with text node alignment

**URL:** <https://discourse.nodered.org/t/help-with-text-node-alignment/84329>\
**Category:** Dashboard\
**Created:** [6 January 2024 09:11 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329 "2024-01-06T09:11:18Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [6 January 2024 09:11 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/1 "2024-01-06T09:11:18Z")

</div>

Hello

I have the following flow:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3c41b733778a610131b12de62c83e964a280c39b.png)

Basically the function populates the text node with:

`> msg.payload = existing_text_in_text_node + new_text + " <br>";`

I store the existing text every time the function is triggered, add some new text each time and the function node is triggered every minute.

When I set the text node to width/height = auto, this happens:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/9837b09ed7d92d7af728c10e824e14c4a1f9e34d.png)

On the fourth injection, it starts to cut text off.

When I set the text node to width/height = 20 x 4, this happens:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b92bed89d2cd7b9e6dc273714d130d772da5ff5.png)

It automatically adds a large space between LOG: and the text node.

I want it to appear under the LOG: heading, but not sure how?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 January 2024 11:29 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/2 "2024-01-06T11:29:23Z")

</div>

Here's a bit simpler approach. No need to mess with string combining and stuff. Just keep your log lines in array and send to the template. The rest is just the CSS ...

```auto
[{"id":"1d7b926393413478","type":"template","z":"f8b8c963bdc117f5","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<p>LOG:</p>\n<ul>\n {{#payload}}\n <li>{{.}}</li>\n {{/payload}}\n</ul>","output":"str","x":500,"y":500,"wires":[["afbfef9b667ccbdf"]]},{"id":"aaf3fa2934635822","type":"inject","z":"f8b8c963bdc117f5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"This is log line one\",\"second line of log\",\"third log line\",\"yet anothr log line\"]","payloadType":"json","x":330,"y":500,"wires":[["1d7b926393413478"]]},{"id":"afbfef9b667ccbdf","type":"ui_template","z":"f8b8c963bdc117f5","group":"55888982bdd0637f","name":"log","order":1,"width":"6","height":"2","format":"<style>\n .log ul{\n list-style-type: none;\n margin-block: 0px;\n padding-inline: 0px;\n font-size: .725em;\n }\n</style>\n<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"log","x":670,"y":500,"wires":[[]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [6 January 2024 19:57 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/3 "2024-01-06T19:57:59Z")

</div>

Thanks for that, looks much better. However, how can I add a new line constant after each payload? I tried html braek   
 in the payload, but that doesn't seem to work.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 January 2024 20:06 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/4 "2024-01-06T20:06:40Z")

</div>

You need to collect those log lines and store in array. And every time new log lines added, feed that array into downstream to dashboard.  
Collecting log lines can freely be separate process. You haven't shared anything about log line birth so can't advise the flow or approach just like that.

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [6 January 2024 20:16 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/5 "2024-01-06T20:16:54Z")

</div>

Here is the flow

```auto
[
    {
        "id": "fd39c82798061132",
        "type": "function",
        "z": "185499ce70cfb9ef",
        "name": "PC Warning",
        "func": "let datetime = new Date();\nlet day = datetime.getDate() //day as a number 1 -31\nlet month = datetime.getMonth() + 1 // month as a number 0-11\nlet year = datetime.getFullYear() //year as a four digit number (yyyy)\nlet hours = datetime.getHours() //the hour (0-23)\nlet minutes = datetime.getMinutes() //-the minute (0-59)\nlet seconds = datetime.getSeconds() //-the seconds (0-59)\n\nif (month < 10) { \n month = \"0\" + month;\n}\nif (seconds < 10) {\n seconds = \"0\" + seconds;\n}\nif (minutes < 10) {\n minutes = \"0\" + minutes;\n}\n\nif (hours < 10) {\n hours = \"0\" + hours;\n}\n\n\ndatetime = day + \"/\" + month + \"/\" + year + \" \" + hours + \":\" + minutes + \":\" + seconds; \n\nif (global.get(\"cpu_temp_warning\") === 0 && global.get(\"cpu_temp_fault_flag\") != 1) {\n global.set(\"cpu_temp_fault_flag\", 1);\n global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \"CPU TEMPERATURE HIGH - RECORDED: \" + msg.payload + \"° <br>\");\n}\nif (global.get(\"cpu_usage_warning\") === 0 && global.get(\"cpu_usage_fault_flag\") != 1) {\n global.set(\"cpu_usage_fault_flag\", 1);\n global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \"CPU USAGE HIGH - RECORDED: \" + msg.payload + \"% <br>\");\n\n}\nif (global.get(\"mem_warning\") === 0 && global.get(\"mem_usage_fault_flag\") != 1) {\n global.set(\"mem_usage_fault_flag\", 1);\n\n global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \" MEMORY USAGE HIGH - RECORDED: \" + msg.payload + \"% <br>\");\n}\nif (global.get(\"hdd_capacity_warning\") === 0 && global.get(\"hdd_usage_fault_flag\") != 1) {\n global.set(\"hdd_usage_fault_flag\", 1);\n global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \" HDD USAGE HIGH - RECORDED: \" + msg.payload + \"% <br>\");\n\n}\n\nmsg.payload = global.get(\"stringtext\");\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 4330,
        "y": 4660,
        "wires": [
            [
                "2a67b5bdf5f3f348"
            ]
        ]
    },
    {
        "id": "2a67b5bdf5f3f348",
        "type": "template",
        "z": "185499ce70cfb9ef",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<p>LOG:</p>\n<ul>\n {{#payload}}\n <li>{{.}}</li>\n {{/payload}}\n</ul>",
        "output": "str",
        "x": 4960,
        "y": 4940,
        "wires": [
            [
                "c33ab084033559fb",
                "f2ad52505ed94526"
            ]
        ]
    },
    {
        "id": "c33ab084033559fb",
        "type": "ui_template",
        "z": "185499ce70cfb9ef",
        "group": "45239af46bedd77d",
        "name": "Log text",
        "order": 4,
        "width": "20",
        "height": "5",
        "format": "<style>\n .log ul {\n list-style-type: none;\n margin-block: 0px;\n padding-inline: 0px;\n font-size: .725em;\n }\n</style>\n<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "log",
        "x": 5160,
        "y": 4940,
        "wires": [
            []
        ]
    },
    {
        "id": "45239af46bedd77d",
        "type": "ui_group",
        "name": "Server7",
        "tab": "65cdc3b7ba4a47b9",
        "order": 8,
        "disp": false,
        "width": "20",
        "collapse": false
    },
    {
        "id": "65cdc3b7ba4a47b9",
        "type": "ui_tab",
        "name": "Server",
        "icon": "dashboard",
        "order": 11,
        "disabled": false,
        "hidden": false
    }
]

```

I have a function node injecting stringtext which contains an error message every minute based on a condition. Can a new line constant be added to the end of each array entry?

It displays fine, but each entry is placed on the same line.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 January 2024 20:25 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/6 "2024-01-06T20:25:47Z")

</div>

Those lines where you do

```auto
 global.set("stringtext", global.get("stringtext") + "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "° <br>");

```

should be changed to store the part

```auto
"[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload

```

into array.  
Same way as you do with the full text currently but just new entry to array.

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [6 January 2024 20:33 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/7 "2024-01-06T20:33:41Z")

</div>

so instead of storing into global var stringtext, stringtext should be an array with each entry stored into a new element of the array?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 January 2024 20:35 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/8 "2024-01-06T20:35:28Z")

</div>

Correct. And that also gives you the option to manage how much log lines will be held or shown.

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [6 January 2024 20:55 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/9 "2024-01-06T20:55:03Z")

</div>

Thanks I will try this later today

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [7 January 2024 06:39 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/10 "2024-01-07T06:39:11Z")

</div>

So I gave it a shot, here is the code:

```auto
let datetime = new Date();
let day = datetime.getDate() //day as a number 1 -31
let month = datetime.getMonth() + 1 // month as a number 0-11
let year = datetime.getFullYear() //year as a four digit number (yyyy)
let hours = datetime.getHours() //the hour (0-23)
let minutes = datetime.getMinutes() //-the minute (0-59)
let seconds = datetime.getSeconds() //-the seconds (0-59)
var x = 0;
var y = 0;

if (month < 10) { 
    month = "0" + month;
}
if (seconds < 10) {
    seconds = "0" + seconds;
}
if (minutes < 10) {
    minutes = "0" + minutes;
}

if (hours < 10) {
    hours = "0" + hours;
}

for(x=0;x<4;x++) {
    if (global.get("stringtext[x]") != undefined) {
       y = y + 1;
    }
}

datetime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds; 

if (global.get("cpu_temp_warning") === 0 && global.get("cpu_temp_fault_flag") != 1) {
    global.set("cpu_temp_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "°");
}
if (global.get("cpu_usage_warning") === 0 && global.get("cpu_usage_fault_flag") != 1) {
    global.set("cpu_usage_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + "CPU USAGE HIGH - RECORDED: " + msg.payload + "% ");

}
if (global.get("mem_warning") === 0 && global.get("mem_usage_fault_flag") != 1) {
    global.set("mem_usage_fault_flag", 1);

    global.set("stringtext[y]", "[" + datetime + "] " + " MEMORY USAGE HIGH - RECORDED: " + msg.payload + "%");
}
if (global.get("hdd_capacity_warning") === 0 && global.get("hdd_usage_fault_flag") != 1) {
    global.set("hdd_usage_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + " HDD USAGE HIGH - RECORDED: " + msg.payload + "%");

}

msg.payload = global.get("stringtext[y]");

return msg;

```

I keep getting this error:

Error: Invalid property expression: unexpected x at position 11

I don't know why that error is returning, position 11 has nothing to do with x :\

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [7 January 2024 07:41 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/11 "2024-01-07T07:41:30Z")

</div>

```auto
let log = global.get('log') ?? [] // full log to store
let logline = null; // line of log if conditions met
const loglimit = 10; // limit count of loglines to hold

let datetime = new Date();
let day = datetime.getDate() //day as a number 1 -31
let month = datetime.getMonth() + 1 // month as a number 0-11
let year = datetime.getFullYear() //year as a four digit number (yyyy)
let hours = datetime.getHours() //the hour (0-23)
let minutes = datetime.getMinutes() //-the minute (0-59)
let seconds = datetime.getSeconds() //-the seconds (0-59)

if (month < 10) {
    month = "0" + month;
}
if (seconds < 10) {
    seconds = "0" + seconds;
}
if (minutes < 10) {
    minutes = "0" + minutes;
}

if (hours < 10) {
    hours = "0" + hours;
}
datetime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;

if (global.get("cpu_temp_warning") === 0 && global.get("cpu_temp_fault_flag") != 1) {
    global.set("cpu_temp_fault_flag", 1);
    logline = "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "°";
}
if (global.get("cpu_usage_warning") === 0 && global.get("cpu_usage_fault_flag") != 1) {
    global.set("cpu_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + "CPU USAGE HIGH - RECORDED: " + msg.payload + "% ";

}
if (global.get("mem_warning") === 0 && global.get("mem_usage_fault_flag") != 1) {
    global.set("mem_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + " MEMORY USAGE HIGH - RECORDED: " + msg.payload + "%";
}
if (global.get("hdd_capacity_warning") === 0 && global.get("hdd_usage_fault_flag") != 1) {
    global.set("hdd_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + " HDD USAGE HIGH - RECORDED: " + msg.payload + "%";
}

// none of conditions above has been met, do nothing
if (!logline){
    return
}

//add new logline to array as last element
log.push(logline)

//remove loglines from array beginning if array is longer than limit says 
while (log.length > loglimit) {
    log.shift()
}

//store log
global.set("log",log)

// add log to payload
msg.payload = log;
//send out
return msg;

```

Code is not tested cos I don't have many things as you do in global context

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [8 January 2024 04:22 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/12 "2024-01-08T04:22:38Z")

</div>

Thank you - that worked a treat!

---

<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:** [7 February 2024 04:22 UTC](https://discourse.nodered.org/t/help-with-text-node-alignment/84329/13 "2024-02-07T04:22:58Z")

</div>

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