I was experimenting with ui_template nodes. I'm just trying to get back to what I had originally. I deleted all the experimental ui_template nodes and flows, but now I can't get back to original.
That's not the default formatting. I'm guessing it's something in a subflow, but I already went into them all and disabled each ui_template node.
Dashboard widgets are not supported in subflows. So don't put them there.
But if you have found all the ui_templates with <style> tags in them and removed/disabled them, then last thing to do is to refresh the browser page. Sometimes it takes many refreshes.
Tip - you have option to search nodes by type
No luck. The UI screen did briefly go back to the white version for a moment. I'll restart my computer too...
Clear the browser cache too.
I was hopeful, but nothing changed.
And your dashboard theme settings are ....
you can also try to change it for one to other and see if it makes difference
Also you can try to change this to some other option and back to desired
Those are the settings, but I will try altering various options to see if something changes...
EDIT
I just changed the "Colour" and everything reset back to normal. Thanks everyone 
One minor question about the Dashboard: How do I get rid of this space between the top tab part and "clear"?
It's a blank white space. I think it originally had the group title.
Have you found already the layout tool?
Yes:
"Clear" is the first object. Is there something to change in the Dashboard group node?
For example
[{"id":"5bfdfd75.5562a4","type":"inject","z":"2bc02f46.a8e46","name":"Hide","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"group\":{\"hide\":[\"Tab1_Group_1\"]}}","payloadType":"json","x":190,"y":100,"wires":[["476fc34d.bc2a0c"]]},{"id":"476fc34d.bc2a0c","type":"ui_ui_control","z":"2bc02f46.a8e46","name":"","x":360,"y":120,"wires":[[]]},{"id":"6ebe218f.c626","type":"inject","z":"2bc02f46.a8e46","name":"Show","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"group\":{\"show\":[\"Tab1_Group_1\"]}}","payloadType":"json","x":190,"y":140,"wires":[["476fc34d.bc2a0c"]]},{"id":"f2a787bd.015a88","type":"function","z":"2bc02f46.a8e46","name":"Create payload","func":"msg.payload = {key1:\"Earth\",key2:\"Wind\",key3:\"Fire\", key4:\"Water\"};\nreturn msg;","outputs":"1","noerr":0,"initialize":"","finalize":"","x":340,"y":200,"wires":[["fa84a230.b0719"]]},{"id":"13c1f4d.609ae0b","type":"inject","z":"2bc02f46.a8e46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"","topic":"","payload":"Start","payloadType":"str","x":190,"y":200,"wires":[["f2a787bd.015a88"]]},{"id":"fa84a230.b0719","type":"ui_template","z":"2bc02f46.a8e46","group":"49b17fdb.a4e67","name":"Text Panel 1","order":0,"width":"0","height":"0","format":"<style>\n\n #tex1 {\n font-weight:bolder;\n letter-spacing: 4px;\n fill: green;\n }\n \n #tex2 {\n font-weight:bolder;\n letter-spacing: 4px;\n fill: aqua;\n }\n \n #tex3 {\n font-weight:bolder;\n letter-spacing: 4px;\n fill: red;\n }\n \n #tex4 {\n font-weight:bolder;\n letter-spacing: 4px;\n fill: blue;\n }\n \n \n</style>\n\n\n<svg>\n\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<text id=\"tex5\" x=\"10\" y=\"90\" > {{msg.payload.key5}} </text>\n\n\n</svg>\n\n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":510,"y":200,"wires":[[]]},{"id":"49b17fdb.a4e67","type":"ui_group","name":"Group 1","tab":"ac0de5e5.b75fb8","order":1,"disp":true,"width":"6","collapse":false},{"id":"ac0de5e5.b75fb8","type":"ui_tab","name":"Tab1","icon":"dashboard"}]
(Source: Is it possible to disable widgets or not display them? - #9 by Andrei)
How to eliminate the space for "Group 1"?
Second minor question: How to use up entire space of textbox?
[{"id":"64b9eadb.b610f4","type":"ui_text_input","z":"2bc02f46.a8e46","name":"","label":"","tooltip":"","group":"38ad949e.4e431c","order":4,"width":"2","height":"1","passthru":true,"mode":"number","delay":300,"topic":"","x":410,"y":320,"wires":[[]]},{"id":"8446bc03.420f7","type":"ui_text","z":"2bc02f46.a8e46","group":"38ad949e.4e431c","order":3,"width":"2","height":"1","name":"","label":"Blue green","format":"","layout":"col-center","x":250,"y":320,"wires":[]},{"id":"474ead.156e7154","type":"ui_dropdown","z":"2bc02f46.a8e46","name":"","label":"","tooltip":"","place":"Select option","group":"38ad949e.4e431c","order":5,"width":"2","height":"1","passthru":true,"multiple":false,"options":[{"label":"","value":"Off","type":"str"},{"label":"","value":"On","type":"str"}],"payload":"","topic":"","x":560,"y":320,"wires":[[]]},{"id":"38ad949e.4e431c","type":"ui_group","name":"","tab":"22d6ac40.30d334","order":1,"disp":true,"width":"6","collapse":false},{"id":"22d6ac40.30d334","type":"ui_tab","name":"Default","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
I want these two words on the same line:
There should be enough space:
The dashboard card layout system is not something to adjust that much. You just must respect it. It is complicated system to help get things aligned for multiple sizes of screens and what is main thing - you have to do nothing to make it happen.
If you want to have full control over the page, you'll need to create it from scratch. There is ui-builder node made just for that. But it is quite of work and takes quite of knowledge base.
If text does not fit, give it more space. Text node has layout options. You can align the label and value in many ways.
If still not enough - use ui_template node and make it as you like using the CSS.
I tried:
<font size=3px>Blue green</font>
Although, the size goes drastically lower with 2px. I just want the label or value (makes no difference) to be on the same line. I don't know how else to change the layout. Any ideas (besides ui_template node because I usually can't get it to work)?
For sure you can force the text be in one line.
But what will happen with other thing surrounding them?
See the lighter gray area. That is the area the text node must fit its content.
Every thing you try to put next to it, will have text on top of it.
That way you are creating only huge mess
How did you force the text to one line?
(I'd prefer not to use the ui_template node.)
Well I use most powerful tool called the CSS, with the ui_template node using it to override dashboard default styles.
(white-space:nowrap for that text node)
Is it worth of to learn it a bit? I think yes. And it is not that hard if it looks like at first .
The dashboard is pretty flexible thing and allows to make fancy things but most of it is the CSS you'll going to deal with.
This is part of my home automation dashboard, nothing major, but just few things of dashboard default CSS are customized.
The group header can be toggled on/off.
Thats a great looking dashboard.. makes mine look amateurish!
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
