Adding Padding to ui-textbox

On my dashboard screen I have multiple UI-Textboxes, I want to give padding to a one UI-Textbox out of multiple UI-Textbox , is there a way to do that , I have tried using Group padding setting in Site but it applies padding to every element present on screen whereas I want it for only a few elements
Thanks & Regards

If by 'ui-textbox' you mean the text or text input node, they both have a </> Class to allow you to add 'Oprional CSS class name(s) for widget' so you can add a ui-template node and add in the CSS you want,

per the node's HELP section

If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a msg.className string property.

Hi @zenofmud
Thanks for the reply , I am talking about text node , To Sum up if I add a class name to the node then make any changes in the CSS styles it will only affect to that node not the others right.
can you please share an example or any reference on how to use optional class name and add CSS
Thank you & Regards

Here is a simple example with two ui-text nodes, one with a class added and the other without:
Screen Shot 2022-03-09 at 6.05.53 AM

Here is the flow:

[{"id":"b42d78e6a766e16f","type":"ui_text","z":"0c912221f9a64941","group":"4f47a445ed561501","order":7,"width":0,"height":0,"name":"","label":"no padding","format":"{{msg.payload}}","layout":"row-spread","className":"","x":570,"y":160,"wires":[]},{"id":"5498888da80f7655","type":"ui_text","z":"0c912221f9a64941","group":"4f47a445ed561501","order":7,"width":0,"height":0,"name":"padding added","label":"padding","format":"{{msg.payload}}","layout":"row-spread","className":"pad-this","x":580,"y":240,"wires":[]},{"id":"bf57bc0327903a5d","type":"inject","z":"0c912221f9a64941","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"hello world","payloadType":"str","x":240,"y":200,"wires":[["b42d78e6a766e16f","5498888da80f7655"]]},{"id":"e206fc331fb2c499","type":"ui_template","z":"0c912221f9a64941","group":"4f47a445ed561501","name":"","order":2,"width":0,"height":0,"format":"<style>\n    .pad-this {padding: 25%;}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":80,"wires":[[]]},{"id":"4f47a445ed561501","type":"ui_group","name":"Default","tab":"755779fe1b6a2182","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"755779fe1b6a2182","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Hi @zenofmud
Thanks for the Example , It works it was exactly what I wanted
Thanks & Regards

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