- How can I set the size of a custom switch icon. (mdi ToggleSwitch)
standard ToggleSwitch is far too small
- How can I center the switch horizontaly in a 3x1 field?
Nobody can answer to that question. The appearance of html element depends on where in DOM it is situated and which kind of CSS rules apply to that DOM tree, including the element itself.
You have to share much more about the situation, specially as you declare something is custom.
just upfront - I have very little CSS experience
please have a look at this small flow and compare it to the standard switch. The size of the standard switch is much bigger.
[{"id":"8aa8d67f70d622dc","type":"inject","z":"e4970c151a447d08","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":410,"y":340,"wires":[["58b0e6ab298b652e"]]},{"id":"58b0e6ab298b652e","type":"ui-switch","z":"e4970c151a447d08","name":"","label":"switch","group":"e9890bb51c43493d","order":1,"width":0,"height":0,"passthru":true,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","clickableArea":"switch","onvalue":"on","onvalueType":"str","onicon":"toggle-switch ","oncolor":"red","offvalue":"off","offvalueType":"str","officon":"toggle-switch-off {3}","offcolor":"yellow","x":630,"y":380,"wires":[["bf5bd18fc4036569"]]},{"id":"bf5bd18fc4036569","type":"debug","z":"e4970c151a447d08","name":"debug 2516","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":850,"y":380,"wires":[]},{"id":"595aa03e029b0efb","type":"inject","z":"e4970c151a447d08","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":410,"y":420,"wires":[["58b0e6ab298b652e"]]},{"id":"e9890bb51c43493d","type":"ui-group","name":"test","page":"317be3cd393d7d7b","width":"12","height":"3","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"317be3cd393d7d7b","type":"ui-page","name":"EGAZ","ui":"4214a7de17fb1f22","path":"/page7","icon":"home","layout":"flex","theme":"a33c0aa6ec50799a","order":7,"className":"","visible":"true","disabled":"false"},{"id":"4214a7de17fb1f22","type":"ui-base","name":"Home Hannes","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"fixed","titleBarStyle":"default"},{"id":"a33c0aa6ec50799a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#2f2d2d","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
please check this link: mdi icons
Couple of links for you.
1 Like
many thanks!
Your first tip works ok for me 
there is still one little issue.
the switch in a field of size 1 is right aligned. Is there a trick to center the switch in a field of size 1.
I have no lable to be set, which normaly is left aligned.
in dashboard 1 the switch was automaticaly centered - meaning label and switch was centered, which makes sense.
Hallo hotNipi,
many thanks for your support!
As you can see I it works as I expected.
Still the little problem of centering the switches remains.
any suggestions for this little problem?
You'll need to configure one ui_template node to apply CSS for page
And for every switch add class name centered-switch
It works only if the switch has no label.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
