# Ways to fine-tune widget layouts and spacing?

**URL:** <https://discourse.nodered.org/t/ways-to-fine-tune-widget-layouts-and-spacing/31857>\
**Category:** Dashboard\
**Created:** [21 August 2020 22:04 UTC](https://discourse.nodered.org/t/ways-to-fine-tune-widget-layouts-and-spacing/31857 "2020-08-21T22:04:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tymarbut](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@tymarbut](https://discourse.nodered.org/u/tymarbut)\
**Post date:** [21 August 2020 22:04 UTC](https://discourse.nodered.org/t/ways-to-fine-tune-widget-layouts-and-spacing/31857/1 "2020-08-21T22:04:19Z")

</div>

I've got two types of widgets next to one another (a gauge and a pie chart), and their layout issues are driving me crazy. I've tried every adjustment I can imagine to their individual sizes, the 1x1 unit sizes/proportions, group padding and spacing, etc. etc. Still, one has a lot more margin than the other, and the titles don't line up.

Here's the closest I've been able to get them - every other permutation has been worse:

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

Is there a way to get under the hood and make tweaks to the widget layouts to get the titles to line up at least, or to do widget-specific padding/spacing rules? Sorry if that's kind of a tall order, but I don't know where to look for more settings at this point.

(Also if anybody knows a good way to get a % sign to appear to the right of the number in the mouseover box, that'd be great, too, but less important.)

---

<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:** [22 August 2020 07:05 UTC](https://discourse.nodered.org/t/ways-to-fine-tune-widget-layouts-and-spacing/31857/2 "2020-08-22T07:05:48Z")

</div>

Labels of widgets are no individually addressable but still you can reach them by using `:nth-child(count)`  
I made a little example how you can add and modify the CSS of elements. Play with it and find the way to make something similar for your dashboard.

```auto
[{"id":"7959eb78.619374","type":"ui_gauge","z":"94f3e22a.5d351","name":"GA","group":"f7080b8f.ec7f98","order":0,"width":"3","height":"3","gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":450,"y":400,"wires":[]},{"id":"69fdf769.e8c6b8","type":"inject","z":"94f3e22a.5d351","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"a","payload":"5","payloadType":"num","x":250,"y":240,"wires":[["14a4f120.81cb4f","83499a0d.7ad408"]]},{"id":"39ef8c05.3aadc4","type":"inject","z":"94f3e22a.5d351","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"b","payload":"7","payloadType":"num","x":250,"y":280,"wires":[["83499a0d.7ad408"]]},{"id":"a7c6c763.d9f548","type":"inject","z":"94f3e22a.5d351","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"c","payload":"9","payloadType":"num","x":250,"y":320,"wires":[["83499a0d.7ad408"]]},{"id":"14a4f120.81cb4f","type":"random","z":"94f3e22a.5d351","name":"","low":"1","high":"10","inte":"true","property":"payload","x":270,"y":400,"wires":[["7959eb78.619374","df881864.228348"]]},{"id":"83499a0d.7ad408","type":"ui_chart","z":"94f3e22a.5d351","name":"","group":"f7080b8f.ec7f98","order":1,"width":"3","height":"3","label":"chart","chartType":"pie","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"70","useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":450,"y":280,"wires":[[]]},{"id":"9312028f.112a5","type":"ui_template","z":"94f3e22a.5d351","group":"f7080b8f.ec7f98","name":"alignement of labels","order":2,"width":0,"height":0,"format":"<style id=\"tweak-labels\">\n/*\nfirst element in card (from left to right). change of label padding (changes whole chart element vertical position)\n*/\n#Home_default_cards > md-card:nth-child(1) > div > p{\n padding-top:0px;\n}\n/*\nsecond element in card (from left to right). change label margin.\n*/\n #Home_default_cards > md-card:nth-child(2) > p.label.nr-dashboard-gauge-title.ng-binding{\n margin: 3px 0px 0px 0px;\n}\n/*\nthird element in card (from left to right) is left unchanged just to preserve original look for comparsion.\n*/\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":520,"wires":[[]]},{"id":"df881864.228348","type":"ui_gauge","z":"94f3e22a.5d351","name":"GA2","group":"f7080b8f.ec7f98","order":0,"width":"3","height":"3","gtype":"gage","title":"Another ga","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":450,"y":440,"wires":[]},{"id":"f7080b8f.ec7f98","type":"ui_group","z":"","name":"default","tab":"cecac48e.2a6aa8","order":1,"disp":true,"width":"9","collapse":false},{"id":"cecac48e.2a6aa8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 September 2020 07:06 UTC](https://discourse.nodered.org/t/ways-to-fine-tune-widget-layouts-and-spacing/31857/3 "2020-09-21T07:06:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.