# What happened to the formatting of my dashboard?

**URL:** <https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778>\
**Category:** Dashboard\
**Created:** [10 February 2021 20:14 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778 "2021-02-10T20:14:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 20:14 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/1 "2021-02-10T20:14:07Z")

</div>

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.

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

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.

---

<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:** [10 February 2021 21:07 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/2 "2021-02-10T21:07:58Z")

</div>

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  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6efbe43e17c2f11d56a8905c30a970e3448a0ed.png)

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 21:13 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/3 "2021-02-10T21:13:55Z")

</div>

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

No luck. The UI screen did briefly go back to the white version for a moment. I'll restart my computer too...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 February 2021 21:15 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/4 "2021-02-10T21:15:24Z")

</div>

Clear the browser cache too.

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 21:31 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/5 "2021-02-10T21:31:13Z")

</div>

I was hopeful, but nothing changed.

---

<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:** [10 February 2021 21:37 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/6 "2021-02-10T21:37:49Z")

</div>

And your dashboard theme settings are ....  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b320e28826621a01d8bd7496b8fcd09d8dd84351.png)

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

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

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 21:40 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/7 "2021-02-10T21:40:11Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 21:51 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/8 "2021-02-10T21:51:15Z")

</div>

One minor question about the Dashboard: How do I get rid of this space between the top tab part and "clear"?

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

It's a blank white space. I think it originally had the group title.

---

<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:** [10 February 2021 21:54 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/9 "2021-02-10T21:54:59Z")

</div>

Have you found already the layout tool?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/0456d48fefb8e607bec1ade6669ae5a40bee52df.png)

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 21:57 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/10 "2021-02-10T21:57:57Z")

</div>

Yes:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/e/de53a2bcbd3d2561644ebfdc9fdec50387ed2a98.png)

* * *

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

"Clear" is the first object. Is there something to change in the Dashboard group node?

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 22:16 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/11 "2021-02-10T22:16:17Z")

</div>

For example

```auto
[{"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](https://discourse.nodered.org/t/is-it-possible-to-disable-widgets-or-not-display-them/1972/9))  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/347d04ad8a0b7859f0c8eba6a450a2b84ce2d05a.png)

How to eliminate the space for "Group 1"?

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 22:33 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/12 "2021-02-10T22:33:33Z")

</div>

Second minor question: How to use up entire space of textbox?

```auto
[{"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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/445d23018412808cc9728966d7c6d8592618c31d.png)

* * *

There should be enough space:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6caaada01c4530381f3472178aeef09af5c18a32.png)

---

<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:** [10 February 2021 22:35 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/13 "2021-02-10T22:35:35Z")

</div>

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.

---

<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:** [10 February 2021 22:42 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/14 "2021-02-10T22:42:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 22:48 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/15 "2021-02-10T22:48:21Z")

</div>

I tried:  
`<font size=3px>Blue green</font>`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/121f1b818761a8536ea32147ed93f10cb900c969.png)

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)?

---

<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:** [10 February 2021 23:06 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/16 "2021-02-10T23:06:08Z")

</div>

For sure you can force the text be in one line.  
But what will happen with other thing surrounding them?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1ff9b79ee23b33ebe1b51b3dff74425da4c0822a.png)  
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

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [10 February 2021 23:13 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/17 "2021-02-10T23:13:43Z")

</div>

How did you force the text to one line?  
(I'd prefer not to use the ui\_template node.)

---

<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:** [10 February 2021 23:16 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/18 "2021-02-10T23:16:34Z")

</div>

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.

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

---

<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:** [11 February 2021 05:13 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/19 "2021-02-11T05:13:39Z")

</div>

The group header can be toggled on/off.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c40103472f28518809f33fddff4a96e675e70ec6.png)

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [11 February 2021 05:19 UTC](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778/20 "2021-02-11T05:19:04Z")

</div>

Thats a great looking dashboard.. makes mine look amateurish!

[Next page](https://discourse.nodered.org/t/what-happened-to-the-formatting-of-my-dashboard/40778.md?page=2)