# Web page still has a problem with formatting

**URL:** https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855
**Category:** Dashboard
**Created:** [7 April 2019 07:53 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855 "2019-04-07T07:53:00Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 07:53 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/1 "2019-04-07T07:53:00Z")

</div>

Ok, this is an ongoing problem.

See picture for what it looks like with no picture:

 ![Screenshot%20from%202019-04-07%2017-49-55](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b467f9a381e69d36e1ac5973c0c63ca3b4315ba0.png)

Adding this node:

```auto
[{"id":"c233402f.b6f82","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Picture","order":1,"width":0,"height":0,"format":"<style>\n body {\n background-image: url(\"/Pictures/Levers_Switches.jpg\");\n background-size: cover;\n }\n #Master_Control_Buttons {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Master_Control_Load {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":530,"y":60,"wires":[[]]},{"id":"145609.3ad979f8","type":"ui_group","z":"","name":"Index","tab":"3776e46e.a7d894","order":1,"disp":false,"width":"3","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

```

The display changes to this:

 ![Screenshot%20from%202019-04-07%2017-50-30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/39890fd1d05a89e9b4fd5a176ffba13132ece37f.png)

Any ideas?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 April 2019 08:16 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/2 "2019-04-07T08:16:55Z")

</div>

??? So you add a template that adds a background image, and you end up with an image in the background. Why is that a problem ?

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 08:19 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/3 "2019-04-07T08:19:53Z")

</div>

See pictures - again.

Just look at the extra stuff I now added.

![Screenshot%20from%202019-04-07%2017-49-55](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/150cca6627afb18a04dbee98e76d0ee90346f88f.png) ![Screenshot%20from%202019-04-07%2017-50-30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b5cb2a01306415880dbc4d4d37ee834b3a337bec.png)

The two possible nodes causing the problem

```auto
[{"id":"c233402f.b6f82","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Picture","order":1,"width":0,"height":0,"format":"<style>\n body {\n background-image: url(\"/Pictures/Levers_Switches.jpg\");\n background-size: cover;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":530,"y":60,"wires":[[]]},{"id":"f63b37c5.0fd758","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Text formatting","order":2,"width":0,"height":0,"format":" <style>\n .nr-dashboard-cardtitle {\n text-align:center;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":710,"y":60,"wires":[[]]},{"id":"145609.3ad979f8","type":"ui_group","z":"","name":"Index","tab":"3776e46e.a7d894","order":1,"disp":false,"width":"3","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

```

---

<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: [7 April 2019 08:37 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/4 "2019-04-07T08:37:59Z")

</div>

Roll back to your previous working version then add the new bits in one at a time till you find the problem. You do save your flows each time you get to a good state don't you?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 April 2019 08:39 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/5 "2019-04-07T08:39:03Z")

</div>

How are you creating that status group ?

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 08:39 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/6 "2019-04-07T08:39:09Z")

</div>

I usually back them up before major changes.

This came on one day for no real reason.

Best of my knowledge I didn't do anything to that page.

I maybe updated the `dashboard` or some node.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 08:44 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/7 "2019-04-07T08:44:45Z")

</div>

> [@dceejay](#):
>
> How are you creating that status group ?

Best of my knowledge I went to the right side and added a new group to the "Master Control" thingy.

It is actually called `index` and the title isn't shown.  
Each _line_ is a text box.  
See attached.

 ![Screenshot%20from%202019-04-07%2018-43-40](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0d5f15fc9528805e51588b1010054a48bde05f35.png)

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 08:47 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/8 "2019-04-07T08:47:08Z")

</div>

(Not wanting to edit the post only to keep linearity)

Those two nodes used to _work_ nicely and the size of that group lined up with the rest of the page.

One day I loaded it and it doesn't any more.

Deleting the node with the picture definition in it, the problem goes away.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 April 2019 09:00 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/9 "2019-04-07T09:00:05Z")

</div>

Can you try setting the scope of just that template to be "in head section" and not on page ?

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 09:05 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/10 "2019-04-07T09:05:09Z")

</div>

Sorry Colin, I don't understand.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 April 2019 09:48 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/11 "2019-04-07T09:48:39Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/671f7c2825bba9f9032d7931b4290aee4c8292e0.png)  
try added to site head section instead ... see if that helps... (it may not... just grasping at straws)

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 09:55 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/12 "2019-04-07T09:55:34Z")

</div>

Colin:

Appreciated.  
You are the man!

Seems to have worked.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 April 2019 10:06 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/13 "2019-04-07T10:06:30Z")

</div>

Dceejay not Colin.. but hey.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [7 April 2019 10:07 UTC](https://discourse.nodered.org/t/web-page-still-has-a-problem-with-formatting/9855/14 "2019-04-07T10:07:22Z")

</div>

Greatest appologies.

Name overload.
