Dashboard: Line-break in text node??

[johnd]

Is there a way of embedding a line break in a text string displayed by a dashboard text node? (Just including a \n in the string doesn't seem to work, but conceivably I don't have the syntax quite right if it needs something a bit different.)

[I have a gauges row eg 4 units high. I'd prefer to use one 'cell' within this row to display multiple text values, one above the other to conserve space. Suspect that I'm hitting up against the limitations of the current dashboard implementation, which doesn't AFAICS allow nested groups.]

[Dave C-J]

No. (well you can insert <br/> if you like but it won't format well.)

Use a ui_template is you want multiple lines

[steve rickus]

If it's just a ui node to display some text, you may be able to embed the html <br> element in your text string, instead of trying to use a line break -- since whitespace is not preserved when rendering html...

I've also successfully used this ui_template node to render a styled div that looks like a textarea, and still respects newlines:

<style>
    #mylog {
        min-height: 300px;
        padding: 0;
        background-color: darkgrey;
        white-space: pre;
    }
</style>

<div id="mylog" ng-bind="msg.payload" contenteditable="true">
    <!-- payload will go here -->
</div>

If that doesn't work, then there is always the ui_template node, utilizing some angular syntax like <span ng-bind-html="msg.payload">

--

Steve

[steve rickus]

Sounds like a nice enhancement... if a ui_text node receives an array of strings, render a series of text elements?

[Dave C-J]

Feel free to raise a PR to look at. Needs to handle the label / formatting also. 

--

Sent from phone.

[johnd]

OK, thanks, maybe it wasn't too stupid a question.

Yes, being able to accept an array would be good. Even better would be to allow multiple inputs to a multi-line text node version, with one input targeted at each line.

BTW is there a known issue with the level version of the gauge - the title seems to site inside the gauge and not above it, which is a little odd, but maybe it's by design?

Sounds like I might need to get acquainted with the template node. Is there a recommended resource anywhere that explains it in more detail? 

[AIOT MAKER]

Perhaps a good workaround is using SVG and CSS to style text within the UI template node.  SVG is quite flexible and powerful. It is not complicated by takes time to learn (I feel I have a quite long road ahead ...).

 

 

Flow example:

[{"id":"f18b3aea.ee5e08","type":"ui_template","z":"657d8641.d5dc08","group":"805aacdc.3fe4d","name":"Text Panel","order":0,"width":"0","height":"0","format":"<style>\n    #rec1 {\n        fill: #333333;\n        stroke:lime; \n        stroke-width: 5;\n        padding: 20;\n    }\n    \n    #tex1 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: red;\n    }\n    \n    #tex2 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: lime;\n    }\n    \n    #tex3 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: aqua;\n    }\n    \n    #tex4 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: white;\n    }\n    \n</style>\n\n\n<svg>\n\n<text id=\"tex1\" x=\"10\" y=\"10\" > {{msg.payload.key1}} </text>\n<text id=\"tex2\" x=\"10\" y=\"30\" > {{msg.payload.key2}} </text>\n<text id=\"tex3\" x=\"10\" y=\"50\" > {{msg.payload.key3}} </text>\n<text id=\"tex4\" x=\"10\" y=\"70\" > {{msg.payload.key4}} </text>\n\n</svg>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":450,"y":160,"wires":[[]]},{"id":"619c14d.e07b0ec","type":"ui_gauge","z":"657d8641.d5dc08","name":"","group":"2fb40440.387a4c","order":0,"width":"0","height":"0","gtype":"donut","title":"","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":450,"y":200,"wires":[]},{"id":"65d6ea41.7a7314","type":"function","z":"657d8641.d5dc08","name":"","func":"msg.payload = {key1:\"Earth\",key2:\"Wind\",key3:\"Fire\", key4:\"Water\"};\nreturn msg;","outputs":"1","noerr":0,"x":290,"y":160,"wires":[["f18b3aea.ee5e08"]]},{"id":"c4998f20.e1671","type":"inject","z":"657d8641.d5dc08","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":160,"wires":[["65d6ea41.7a7314"]]},{"id":"805aacdc.3fe4d","type":"ui_group","z":"","name":"Text Panel","tab":"4e528085.a1bfa","disp":true,"width":"5"},{"id":"2fb40440.387a4c","type":"ui_group","z":"","name":"Gauge","tab":"4e528085.a1bfa","disp":true,"width":"5"},{"id":"4e528085.a1bfa","type":"ui_tab","z":"","name":"Testing","icon":"dashboard","order":0}]

 

[Dave C-J]

John

if you need individual targets then just use separate text nodes... one per line... or am i missing something ?

or indeed - as per AIOT MAKER above..  good example

And yes the level gauge is meant to be like that to get the circle as large as possible - often people use it without a label and use the units inside to indicate what it's for

[johnd]

Hmm, what I was seeking to do was something like:

Line 1     |--------------| |--------------!

Line 2     |  Gauge 1 | |  Gauge 2 |

Line 3     |                 | |                 |

Line 4     |--------------| |---------------|

Sorry, proportional font will probably mess that up, but hopefully the idea gets through.

[Nick O'Leary]

+----------------+ +------------------------------------------------------+

| Group 1        | |Group 2                                               |

| +------------+ | | +-----------------------+ +------------------------+ |

| |ui_text     | | | |ui_gauge               | |ui_gauge                | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | +-----------------------+ +------------------------+ |

+----------------+ +------------------------------------------------------+

Set the widths of each component as:

  Group1: 6

  Each ui_text: 6

  Group2: 12

  Each ui_gauge: 6

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/ddbe423e-ffc9-4d3c-a45f-2764da928daf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nick O'Leary]

http://asciiflow.com/ is handy for drawing these things :)

[johnd]

@Nick: OK thanks for the illustration and the link. Is this just a kind, corrected drawing of my attempt, to clarify the question and objective? Or are suggesting that the stacking ought to work like that anyway, maybe if you get the element sizing just right? I thought that that the default 'stacking' of elements within the same group would be left to right, not top to bottom?

[Nick O'Leary]

Hi John

it is a suggested solution for what you want - note the comments below about the sizes to apply to the various elements.

Widgets are places as high and to the left as they fit. So yes, they will line up left-to-right IF there is the horizontal space for them.

If the group width is 6 and the ui_text widget is 6 then you only get 1 in each row... so they stack vertically.

Nick

On 21 December 2017 at 13:42, johnd <gpro...@gmail.com> wrote:

@Nick: OK thanks for the illustration and the link. Is this just a kind, corrected drawing of my attempt, to clarify the question and objective? Or are suggesting that the stacking ought to work like that anyway, maybe if you get the element sizing just right? I thought that that the default 'stacking' of elements within the same group would be left to right, not top to bottom?

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/1f2a634a-2643-41ac-b09d-c7cc2c73bc25%40googlegroups.com.

[johnd]

Hmm, in playing further with my dashboard layout I've managed to screw up what was previously a working layout and can't find a way of backtracking. I suspect that to start with some default width parameter for the dashboard as a whole was being used, but somehow this has now got overridden. Is there such a parameter and, if so, where can I access it please?

I was initially using a width of 13 units for my first ui group which occupied the central 50-60% of my 1280 wide screen. Subsequent groups seemed to stack automatically below this, leaving a wide screen margin either side, which was fine (if slightly confusing because I couldn't see what was controlling the on-screen positioning and width of the dashboard a a whole).

But now the groups seem to have broken free from the original overall dashboard width limit and are looking to order themselves across the full screen width, which is then tricky to control.

Have I managed to explain this clearly enough?

[Nick O'Leary]

A screenshot would be even clearer ;)

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/2ae5521e-14ef-4527-9695-74e67694b30c%40googlegroups.com.

[johnd]

Problem is that I no longer have 'before' shot of the previously working version. But if it helps at all: Here's the flow:

[{"id":"10341fc1.8402e","type":"inject","z":"ab72295e.438a18","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":100,"y":100,"wires":[["4c9f3427.b4505c"]]},{"id":"4c9f3427.b4505c","type":"http request","z":"ab72295e.438a18","name":"Get WLC2 CSV","method":"GET","ret":"txt","url":"https://s3.amazonaws.com/export-wl2-live.weatherlink.com/data/private-access-code_001D0A800055_2017_12_18_13_00.csv","tls":"","x":280,"y":100,"wires":[["2c986120.cdd15e"]]},{"id":"2c986120.cdd15e","type":"csv","z":"ab72295e.438a18","name":"Split File \\n","sep":"\\n","hdrin":"","hdrout":"","multi":"mult","ret":"\\n","temp":"","x":470,"y":100,"wires":[["38da0d6e.fbea72"]]},{"id":"38da0d6e.fbea72","type":"function","z":"ab72295e.438a18","name":"Line 18","func":"return {payload: msg.payload[0].col18};","outputs":1,"noerr":0,"x":640,"y":100,"wires":[["e9bcb323.6f445"]]},{"id":"eb7c98b3.8dd248","type":"ui_text","z":"ab72295e.438a18","group":"619f5620.712738","order":0,"width":"6","height":"1","name":"DT","label":"Latest update","format":"{{msg.payload}}","layout":"row-left","x":490,"y":240,"wires":[]},{"id":"438b8318.c68f0c","type":"ui_text","z":"ab72295e.438a18","group":"db8c3509.cab6d8","order":0,"width":"4","height":"4","name":"TempOut","label":"","format":"{{msg.payload}}","layout":"row-center","x":510,"y":280,"wires":[]},{"id":"e9bcb323.6f445","type":"function","z":"ab72295e.438a18","name":"Distributor","func":"input = msg.payload.split(\",\");\n\n//1 DateTime\nvar msg1 = {payload: input[0]};\n//2 TempOut\nvar msg2 = {payload: input[5]};\n//3 Hum\nvar RH = parseInt(input[19]);\nRH=RH.toString();\nvar RHDP = \"RH = \" + RH + \" \" + \"\\n\" + \"Dew Pt \" + input[22];\nvar msg3 = {payload: RH};\n//4 Dew\nvar msg4 = {payload: input[22]};\n//5 MeanSpeed\nvar msg5 = {payload: input[25]};\n//6 GustSpeed\nvar msg6 = {payload: input[34]};\n//7 MeanDir\nvar msg7 = {payload: input[28]};\n//8 Bar\nvar msg8 = {payload: input[46]};\n//9 Rain\nvar msg9 = {payload: input[48]};\n//10 ET\nvar msg10 = {payload: input[52]};\nreturn [msg1,msg2,msg3,msg4,msg5,msg6,msg7,msg8,msg9,msg10];","outputs":"10","noerr":0,"x":130,"y":380,"wires":[["eb7c98b3.8dd248"],["438b8318.c68f0c"],["798f7021.79fad"],["ccf13949.d1db88"],["5c6b7b0b.3456b4"],[],["c2dab3cd.55423"],["c53bb5ba.8b2c38"],["af255578.c9e6c8"],["894850b9.2ccc2"]],"outputLabels":["DT","TempOut","Hum","Dew","MeanSpeed","GustSpeed","MeanDir","Bar","Rain","ET"]},{"id":"5c6b7b0b.3456b4","type":"ui_gauge","z":"ab72295e.438a18","name":"MeanSpeed","group":"db8c3509.cab6d8","order":0,"width":"4","height":"4","gtype":"gage","title":"Wind speed","label":"MPH","format":"{{value}}","min":0,"max":"50","colors":["#00b500","#e6e600","#ca3838"],"seg1":"10","seg2":"20","x":520,"y":340,"wires":[]},{"id":"bdcb39e0.517668","type":"ui_gauge","z":"ab72295e.438a18","name":"WindDir","group":"db8c3509.cab6d8","order":0,"width":"4","height":"4","gtype":"compass","title":"Wind direction","label":"Degrees","format":"{{value}}","min":0,"max":"360","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":660,"y":400,"wires":[]},{"id":"798f7021.79fad","type":"ui_text","z":"ab72295e.438a18","group":"c8806b40.c6c768","order":0,"width":"2","height":"1","name":"Hum","label":"","format":"{{msg.payload}}","layout":"row-left","x":520,"y":460,"wires":[]},{"id":"af255578.c9e6c8","type":"ui_gauge","z":"ab72295e.438a18","name":"Rain","group":"9ec72cdb.72273","order":0,"width":"2","height":"2","gtype":"wave","title":"Rainfall","label":"mm","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":530,"y":580,"wires":[]},{"id":"c53bb5ba.8b2c38","type":"ui_chart","z":"ab72295e.438a18","name":"Bar","group":"9ec72cdb.72273","order":0,"width":"4","height":"4","label":"Pressure","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"Awaiting data","dot":false,"ymin":"","ymax":"","removeOlder":"3","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":530,"y":640,"wires":[[],[]]},{"id":"894850b9.2ccc2","type":"ui_chart","z":"ab72295e.438a18","name":"ET","group":"9ec72cdb.72273","order":0,"width":"4","height":"4","label":"ET","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"Awaiting data","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":530,"y":700,"wires":[[],[]]},{"id":"c2dab3cd.55423","type":"function","z":"ab72295e.438a18","name":"DirToDeg","func":"var dir = msg.payload;\nswitch (dir){\n    case \"N\":\n        msg.payload=360;\n        break;\n    case \"NNE\":\n        msg.payload=23;\n        break;\n    case \"NE\":\n        msg.payload=45;\n        break;\n    case \"ENE\":\n        msg.payload=68;\n        break;\n    case \"E\":\n        msg.payload=90;\n        break;\n    case \"ESE\":\n        msg.payload=113;\n        break;\n    case \"SE\":\n        msg.payload=135;\n        break;\n    case \"SSE\":\n        msg.payload=158;\n        break;\n     case \"S\":\n        msg.payload=180;\n        break;\n    case \"SSW\":\n        msg.payload=203;\n        break;\n    case \"SW\":\n        msg.payload=225;\n        break;\n    case \"WSW\":\n        msg.payload=248;\n        break;\n    case \"W\":\n        msg.payload=270;\n        break;\n    case \"WNW\":\n        msg.payload=293;\n        break;\n    case \"NW\":\n        msg.payload=315;\n        break;\n    case \"NNW\":\n        msg.payload=338;\n        break;   \n    default:\n        msg.payload=\"\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":400,"wires":[["bdcb39e0.517668"]]},{"id":"ccf13949.d1db88","type":"ui_text","z":"ab72295e.438a18","group":"c8806b40.c6c768","order":0,"width":"2","height":"1","name":"DewPt","label":"","format":"{{msg.payload}}","layout":"row-left","x":530,"y":520,"wires":[]},{"id":"619f5620.712738","type":"ui_group","z":"","name":"DateTime","tab":"b72a7dd4.40246","order":1,"disp":false,"width":"12"},{"id":"db8c3509.cab6d8","type":"ui_group","z":"","name":"Second row","tab":"b72a7dd4.40246","order":2,"disp":false,"width":"12"},{"id":"c8806b40.c6c768","type":"ui_group","z":"","name":"Text_ui","tab":"b72a7dd4.40246","order":4,"disp":true,"width":"2"},{"id":"9ec72cdb.72273","type":"ui_group","z":"","name":"Third row","tab":"b72a7dd4.40246","order":3,"disp":false,"width":"12"},{"id":"b72a7dd4.40246","type":"ui_tab","z":"","name":"Current Weather","icon":"dashboard"}]

And current screenshot attached.

NB1 I was hacking this around, trying different groupings, widths etc so I'm aware that the layout is probably no longer correct as it currently stands.

NB2 The flow is sourcing data from a cloud platform, but won't work as it stands because the URL contains a private access code. Happy to provide this if it will help at all, but not publicly.

[johnd]

Sorry, I should probably have added also a clarification of what I was hoping to achieve:

* The dashboard centred on the screen, with an overall width of (arbitrarily) 12 units say;

* Row 1: simply the datetime stamp;

* Row 2: the temp + wind speed + wind dir group;

* Row 3: the text group labelled ui_text and then on the same row the final group;

[johnd]

OK, I've now found github documentation, which I must have missed earlier** and this helps to make things clearer and amplify Nick's comment.

But what I'm still missing is how you can force a new row to start: Let's say you want a dashboard 12 units wide on a screen that's eg 24 units wide. And you want the first group on the second row to be 2 units wide (as per the multi-line text items discussed upthread). How do you stop this text group from simply packing to the right of the top row? I was half-expecting that there might be a container for the dashboard as a whole, for which you could set a max-width property.

**As an aside and as a complete newcomer to NR, if I could make one plea/suggestion it would be to have a version of all the official documentation consolidated somewhere in one place, ideally in a wiki or PDF format for easy reference. It doesn't even need to be new information in the first instance, just the complete information on individual items/topics copied into one place rather than scattered across the 4 or 5 places that one needs to check at present. This would definitely make the learning curve for NR less frustrating. (It isn't that NR is difficult to learn in principle - it clearly isn't - but embarking on a first NR project, it doesn't take long before tripping over some item that's less than obvious.and which takes time to resolve.)

[Colin Law]

On 24 December 2017 at 16:30, johnd <gpro...@gmail.com> wrote:
> OK, I've now found github documentation, which I must have missed earlier**
> and this helps to make things clearer and amplify Nick's comment.
>
> But what I'm still missing is how you can force a new row to start: Let's
> say you want a dashboard 12 units wide on a screen that's eg 24 units wide.
> And you want the first group on the second row to be 2 units wide (as per
> the multi-line text items discussed upthread). How do you stop this text
> group from simply packing to the right of the top row? I was half-expecting
> that there might be a container for the dashboard as a whole, for which you
> could set a max-width property.

I don't know if there is a better way but you could put a filler in
with empty contents, a text node showing an empty string for example

Colin

[johnd]

Thanks, and I can't shake off the feeling that I'm totally missing some very obvious part of the jigsaw. But I can't immediately see how a text filler would help: in my example of a 12-unit wide dashboard on a 24-unit wide screen. 

Wouldn't you need an 11-unit wide filler to force a 2-unit wide text widget on to the next line? And wouldn't this also have the effect of pushing the dashboard almost to the left screen edge and since you don't seem to be able to set background colours on a per-widget basis, the dashboard would take on an odd shape. Or have I not grasped the idea properly?

I get the sense that maybe the existing dashboard layout logic works OK if the dashboard is to display full-screen.but for dashboards with only a limited number of widgets then the individual widgets maybe need to become over-large. Guess I need to find a way of placing the dashboard in a container via a div but not quite sure how to do that.

[Dave C-J]

the overall screen tries to arrange the groups from left to right , top to bottom...  

If you have a screen that is 24 wide and place a 12 top left... then the next 12 will sit next to it, and not below...

If your screen was 23 wide it wouldn't fit alongside and would then have to go below.

[johnd]

Many thanks again for your help and patience. Just three quick points given that it's Christmas Eve:

First, this restatement is very clear and straightforward. Where I've been led astray I suspect is that the initial default behaviour of the dashboard wasn't quite like that. The dashboard was initially centred on the screen with a wide margin either side. If it had started top left then the logic would perhaps have been more transparent.

Second, my question about how you stop a 2-unit wide text group that you want to target at row 2 from simply packing to the right of the top row (if there's space for it) is still there. I guess the working answer is that you can't unless you design the dashboard full-screen on your development machine.

Third, the only other alternative would presumably be to put the dashboard in a div with controlled width using a template node? But I don't know enough about NR interactions with JQuery as yet to know how to frame that. Any pointers from anyone gratefully received.

[Dave C-J]

Hi

1) ok to clarify a bit further...  it tries to fit as many groups across the page as possible - and then centres them. So 13 / 24 should be centred with large borders either side.

2) Correct you can't stop it - it will fit next to the top row so will naturally sit there. But each widget within a group can have a fixed width if you care to set it so you could make its group width 13 (or whatever you need to force a 2nd line)  and the text widget width 2. (default is auto which fills the group)

3) tricky, as the dashboard "owns" the page so embedding it all in something else is harder... but you may be able to play with the CSS of the various containers within it to force them to other widths by using a template.

[Colin Law]

Can I just check that you know that you can specify the total width in
the configuration of a group. Then you know how much space you have to
fill on each row in the group.

Colin

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to node-red+u...@googlegroups.com.

> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/node-red/0b326f24-73b4-4e51-92ea-cd2726c10852%40googlegroups.com.

[johnd]

Just to round this out while it's fresh in my mind: Yes, thanks, Colin, I do appreciate that point, but this whole thread grew out of an enquiry (effectively) as to whether there was a multi-line text widget where the line-breaks could be specified in advance, to which the answer seems to be currently no. Nick then suggested a workaround which he kindly represented as:

+----------------+ +------------------------------------------------------+

| Group 1        | |Group 2                                               |

| +------------+ | | +-----------------------+ +------------------------+ |

| |ui_text     | | | |ui_gauge               | |ui_gauge                | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

|                | | |                       | |                        | |

| +------------+ | | |                       | |                        | |

| |ui_text     | | | |                       | |                        | |

| +------------+ | | +-----------------------+ +------------------------+ |

+----------------+ +------------------------------------------------------+

which is a great idea, but further discussion (if I've understood correctly) shows only works robustly if the multi-line Group 1 is the first group in the dashboard _or_ if the dashboard largely occupies the browser width. So eg if I want Group 1 as the first group on row 2 and the dashboard width is significantly less than the browser width then the layout begins to fail.

So I think we're back to the suggestion above that a multi-line text widget accepting a string array as the payload (one item per line) would be very useful in this situation.

[Dave C-J]

Not sure why you say it breaks. If you only have 2 group , one with multiple text widgets in, (as Nick suggests) then each group will stay together. 

--

Sent from phone.

[johnd]

If you _only_ have two groups as per the sketch then agreed it doesn't break. 

But if these two groups are part of a larger group-set in a dashboard and were eg targeted (in a default layout) as being row 2 in the dashboard (ie with other groups preceding as row 1) and are not fully constrained by the browser width then the relatively narrow 'Group 1' will re-sort on to the end of row 1.

[johnd]

>> Third, the only other alternative would presumably be to put the dashboard in a div with controlled width using a template node?

>  tricky, as the dashboard "owns" the page so embedding it all in something else is harder... but you may be able to play with the CSS of the various containers within it to force them to other widths by using a template.

OK, understood. So there's no chance of adding a setting within NR that could control a dashboard's max width?

[Dave C-J]

John

well you could add a ui_template like this to force the layout to a certain width

a

[johnd]

OK, many thanks, that's great - finally I can achieve what I'd been aiming for. See image attached (which is still very much in the form of block elements with detail still to be worked up, but at least the blocks pack together as required). A few follow-up comments/wrinkles:

1. Template nodes seem to come with a boilerplate line of <div ng-bind-html="msg.payload"></div>. Doesn't seem to make any difference whether I leave that in or delete it.

2. There's always a deploy error from the template node. It (indirectly) asks for a DOCTYPE to be added, but adding one doesn't remove the error. But doesn't stop the markup working as required.

3. Because I wanted the blocks to pack tightly together, I had been aiming to set all of Widget spacing, Group padding and Group spacing, both H and V, to zero. But this causes the required packing to break. I need to set Group spacing V to 1 before the packing works correctly (all other padding/spacing values at zero still) and don't quite understand what's going on.

4. The groups seem to have a white border (of 1px?) visible on all but the light theme. Again not quite sure where that's coming from, but would be nice to control.

[Dave C-J]

Hi

1) That will let any msg.payload you send into the template be displayed... so if you never send anything into the template node it should make no difference - but cleaner to remove. (It's just an example to get people going)

2) Where do you see that error - which OS and browser are you using ?

3) all zeros should work fine... but without your exact layout/flow difficult to guess what may be breaking

4) you can control it by going to custom theme and setting the Group border the same as the group background

[Stephen Mann]

When you get it working, could you please post the solution?

Steve Mann