Hi
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.classNamestring 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:
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.
