Text width full size


#1

I would like to create a dashboard with text as wide as the entire browser window, how do I do it?


#2

No. It is a responsive design. You can read about it in the description of the node


#3

oh :frowning:
but text sometimes is cut

Schermata%20del%202018-07-11%2014-01-26


#4

`[{"id":"7abaa53a.fd8b7c","type":"inject","z":"e333e992.e12c98","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":60,"wires":[["bec485db.f879b8"]]},{"id":"bec485db.f879b8","type":"http request","z":"e333e992.e12c98","name":"Richieste API","method":"GET","ret":"obj","url":"https://launchlibrary.net/1.4/launch/next/1","tls":"","x":200,"y":120,"wires":[["1682515.db605af"]]},{"id":"85daaa39.143698","type":"debug","z":"e333e992.e12c98","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":390,"y":420,"wires":[]},{"id":"1682515.db605af","type":"change","z":"e333e992.e12c98","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.launches[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":200,"y":180,"wires":[["5cc6cb26.917d74","c5a6fee6.e994e","85daaa39.143698"]]},{"id":"5cc6cb26.917d74","type":"ui_text","z":"e333e992.e12c98","group":"b488e1e6.51f69","order":0,"width":0,"height":0,"name":"","label":"Nome","format":"{{msg.payload.name}}","layout":"row-spread","x":410,"y":140,"wires":[]},{"id":"c5a6fee6.e994e","type":"ui_text","z":"e333e992.e12c98","group":"b488e1e6.51f69","order":0,"width":"0","height":"0","name":"","label":"Descrizione","format":"{{msg.payload.missions[0].description}}","layout":"row-spread","x":430,"y":180,"wires":[]},{"id":"b488e1e6.51f69","type":"ui_group","z":"","name":"Group 1","tab":"b382f858.9d8ea8","order":1,"disp":false,"width":"9","collapse":false},{"id":"b382f858.9d8ea8","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":1}]`

#5


#6

i read i need to use ui_template for output multiline responsive, how can i do?
thanks


#7

You may use a function template to format and style an html output that will feed the ui_template. You can apply all sorts of CSS styling in the function template.

[{"id":"29756df7.162bd2","type":"tab","label":"Flow 6","disabled":false,"info":""},{"id":"d823059e.177e78","type":"inject","z":"29756df7.162bd2","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":80,"wires":[["fba691ba.f1c4c"]]},{"id":"fba691ba.f1c4c","type":"http request","z":"29756df7.162bd2","name":"Richieste API","method":"GET","ret":"obj","url":"https://launchlibrary.net/1.4/launch/next/1","tls":"","x":300,"y":160,"wires":[["fe0a6c63.50b0e"]]},{"id":"fe0a6c63.50b0e","type":"change","z":"29756df7.162bd2","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.launches[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":220,"wires":[["f04842f8.914d1"]]},{"id":"afc4c2a8.0603d","type":"ui_template","z":"29756df7.162bd2","group":"9638a658.2648b8","name":"","order":0,"width":"7","height":"6","format":"<div ng-bind-html=\"msg.payload\"></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":920,"y":220,"wires":[[]]},{"id":"f04842f8.914d1","type":"change","z":"29756df7.162bd2","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.missions[0].description","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":220,"wires":[["7ca70f54.2a063"]]},{"id":"7ca70f54.2a063","type":"template","z":"29756df7.162bd2","name":"Function Template","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<!DOCTYPE html>\n<html>\n<head>\n    \n</head>\n\n<body>\n    \n    <div>\n        {{payload}}\n    </div>\n    \n</body>\n</html>","output":"str","x":750,"y":220,"wires":[["afc4c2a8.0603d"]]},{"id":"9638a658.2648b8","type":"ui_group","z":"","name":"Group 1","tab":"c1dae2ef.c3a59","order":1,"disp":false,"width":"9","collapse":false},{"id":"c1dae2ef.c3a59","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":1}]

#8

I think the OP's issue or concern is that when you resize the window, the text in the box does not reflow and remain readable withour having to use the scroll bars that will pop up.