Ways to fine-tune widget layouts and spacing?

[tymarbut]

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:

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

[hotNipi]

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.

[{"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}]