I seem to be totally missing how to do this. I want to remove the spacing between text nodes on the dashboard, this 
.
I've adjusted the different settings under Site --> Sizes but none of them seem to make a difference.
Is it possible to reduce the gap, if so how, or am I stuck with it?
Thanks!
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?
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:
[{"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}]
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:
[{"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}]
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!!
And you were correct. thanks for the help!!
@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:
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?
@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.
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
