# Reducing the gap between text nodes

**URL:** <https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937>\
**Category:** Dashboard\
**Created:** [20 June 2018 00:28 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937 "2018-06-20T00:28:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [20 June 2018 00:28 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/1 "2018-06-20T00:28:19Z")

</div>

I seem to be totally missing how to do this. I want to remove the spacing between text nodes on the dashboard, this ![snip_20180619191410](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/41c8823eb55686089ad98a42c5c2973620b3b7b1.png).

I've adjusted the different settings under Site --\> Sizes but none of them seem to make a difference.

![snip_20180619191449](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/f88813f1d745dae297e0ecd34578162b711441c0.png)

Is it possible to reduce the gap, if so how, or am I stuck with it?

Thanks!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 June 2018 00:43 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/2 "2018-06-20T00:43:45Z")

</div>

make the vertical spacing smaller - say from 0 to 20

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [20 June 2018 01:09 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/3 "2018-06-20T01:09:57Z")

</div>

> [@zenofmud](#):
>
> make the vertical spacing smaller - say from 0 to 20

Well... that's one combination I didn't try. However, after making the change which did work, it takes a form I have and compresses it where you are required to use scroll bars, any way around that?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 June 2018 11:38 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/4 "2018-06-20T11:38:07Z")

</div>

While some things (like background-color) could be controled by adding a ui-template node and adding some CSS to it, the height is controled by ‘ng-style’ that is dynamically created. I don’t know if there is a way to code a script in a ui-template node that could over ride it.

Here is an example of you you could change the background-color using a template node based on the ID and classes assigned to the elements:

```auto
[{"id":"93ef381e.4144","type":"ui_text","z":"bde3c158.f17cd","group":"8b5360d3.601e88","order":1,"width":"7","height":"1","name":"","label":"Alarm Status","format":"{{msg.payload}}","layout":"row-spread","x":510,"y":120,"wires":[]},{"id":"348ec6f.692b63a","type":"ui_text","z":"bde3c158.f17cd","group":"8b5360d3.601e88","order":2,"width":"7","height":"1","name":"","label":"Time Remaining","format":"{{msg.payload}}","layout":"row-spread","x":510,"y":200,"wires":[]},{"id":"5da9a619.f01b58","type":"inject","z":"bde3c158.f17cd","name":"","topic":"","payload":"Disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":120,"wires":[["93ef381e.4144"]]},{"id":"630c161b.7e14a8","type":"inject","z":"bde3c158.f17cd","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":200,"wires":[["348ec6f.692b63a"]]},{"id":"ded86e48.f198a","type":"ui_template","z":"bde3c158.f17cd","group":"8b5360d3.601e88","name":"","order":0,"width":0,"height":0,"format":"// note: the borders are just for visually \n// seeing what each element covers\n<style>\n#Alarms_Group_1 {\n border: solid 1px black;\n}\n#Alarms_Group_1_cards {\n border: solid 3px red ;\n height: 40px !important;\n}\n#Alarms_Group_1_cards .nr-dashboard-text {\n background-color: blue;\n height:20px !important;\n border: solid 5px green;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":380,"y":40,"wires":[[]]},{"id":"8b5360d3.601e88","type":"ui_group","z":"","name":"Group 1","tab":"c7a0c083.e3e848","order":1,"disp":true,"width":"7","collapse":false},{"id":"c7a0c083.e3e848","type":"ui_tab","z":"","name":"Alarms","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 June 2018 22:53 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/5 "2018-06-20T22:53:18Z")

</div>

Ah Ha! I figured it out. You have to set the CSS 'position' of the nr-dashboard-text in the group to 'static'. Here is an example with two tabs showing the css that will only effect one of the tabs:

```auto
[{"id":"bcc301e2.996758","type":"ui_text","z":"4cd4f4f3.7effcc","group":"f03bcc4.355aa3","order":1,"width":"7","height":"1","name":"","label":"Alarm Status","format":"{{msg.payload}}","layout":"row-spread","x":390,"y":140,"wires":[]},{"id":"89ecd5f7.6159b8","type":"ui_text","z":"4cd4f4f3.7effcc","group":"f03bcc4.355aa3","order":2,"width":"7","height":"1","name":"","label":"Time Remaining","format":"{{msg.payload}}","layout":"row-spread","x":390,"y":220,"wires":[]},{"id":"cb4a4780.37f128","type":"inject","z":"4cd4f4f3.7effcc","name":"","topic":"","payload":"Disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":140,"wires":[["bcc301e2.996758"]]},{"id":"f0411449.136a7","type":"inject","z":"4cd4f4f3.7effcc","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":220,"wires":[["89ecd5f7.6159b8"]]},{"id":"cd068ce9.16809","type":"ui_template","z":"4cd4f4f3.7effcc","group":"f03bcc4.355aa3","name":"","order":3,"width":0,"height":0,"format":"// note: the borders are just for visually \n// seeing what each element covers\n<style>\n#Alarms_Group_1 {\n xborder: solid 1px black;\n}\n#Alarms_Group_1_cards {\n xborder: solid 3px red ;\n height: 40px !important;\n}\n#Alarms_Group_1_cards .nr-dashboard-text {\n xbackground-color: blue;\n xborder: solid 5px green;\n height:20px !important;\n position: static;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":260,"y":60,"wires":[[]]},{"id":"526a9f2.c56c66","type":"ui_text","z":"4cd4f4f3.7effcc","group":"1d5a4116.5c9cc7","order":1,"width":"7","height":"1","name":"Alarm Status 2","label":"Alarm Status 2","format":"{{msg.payload}}","layout":"row-spread","x":380,"y":320,"wires":[]},{"id":"4943a5ab.d5ba8c","type":"ui_text","z":"4cd4f4f3.7effcc","group":"1d5a4116.5c9cc7","order":2,"width":"7","height":"1","name":"Time Remaining 2","label":"Time Remaining 2","format":"{{msg.payload}}","layout":"row-spread","x":380,"y":400,"wires":[]},{"id":"3a464850.938ab8","type":"inject","z":"4cd4f4f3.7effcc","name":"","topic":"","payload":"Disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":320,"wires":[["526a9f2.c56c66"]]},{"id":"a7f03dfe.20951","type":"inject","z":"4cd4f4f3.7effcc","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":400,"wires":[["4943a5ab.d5ba8c"]]},{"id":"f03bcc4.355aa3","type":"ui_group","z":"","name":"Group 1","tab":"abe23ae3.9bbb68","order":1,"disp":true,"width":"7","collapse":false},{"id":"1d5a4116.5c9cc7","type":"ui_group","z":"","name":"Group 2","tab":"eb8ce6b7.5818c","order":1,"disp":true,"width":"6","collapse":false},{"id":"abe23ae3.9bbb68","type":"ui_tab","z":"","name":"Alarms","icon":"dashboard","order":4},{"id":"eb8ce6b7.5818c","type":"ui_tab","z":"","name":"Alarm 2","icon":"dashboard","order":3}]

```

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [21 June 2018 22:54 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/6 "2018-06-21T22:54:25Z")

</div>

> [@zenofmud](#):
>
> Ah Ha! I figured it out.

Awesome! Sorry for the delay in responding been working late these days. I will try this and let you know results. Thanks for looking into this!!

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [15 July 2018 21:43 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/7 "2018-07-15T21:43:20Z")

</div>

> [@zenofmud](#):
>
> Ah Ha! I figured it out.

And you were correct. thanks for the help!!

---

<div class="post-metadata">

**Author:** ![Moosbueffel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moosbueffel/32/36732_2.png) [@Moosbueffel](https://discourse.nodered.org/u/Moosbueffel)\
**Post date:** [19 March 2021 10:08 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/8 "2021-03-19T10:08:44Z")

</div>

@zenofmud thanks, for the solution I searched. But it's not really satisfying, because the space to the next widget will be than greater. So the size over all is the same ☹

My intention is to compress the output so I don't need to scroll down. Here you can see, what I mean:

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1a13a31ac062a89674df69147efd8d48aac14b7.png)

Is there also a solution to make the space between widgets normal? (I played with the size in Alarms\_Group\_1\_cards , bit it changes nothing). Perhaps you have a link to the description of that coding?

Also I'm wondering, why the borders and colors you implemented are ignored on my GUI?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [19 March 2021 10:26 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/9 "2021-03-19T10:26:17Z")

</div>

@Moosbueffel Since this thread that is over 3 years old and my simple answer would be "I don't remember", I'm going to close this thread and ask you to open a new one and state your issue and what you have tried. Hopefully someone (maybe even me) will be able to help.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [19 March 2021 10:26 UTC](https://discourse.nodered.org/t/reducing-the-gap-between-text-nodes/937/10 "2021-03-19T10:26:27Z")

</div>