Size of custom MDI switch icon

  1. How can I set the size of a custom switch icon. (mdi ToggleSwitch)
    standard ToggleSwitch is far too small

image

  1. 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 :+1: :slightly_smiling_face:

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

image

And for every switch add class name centered-switch

It works only if the switch has no label.

1 Like

now it is perfect! :slightly_smiling_face: :+1:
thanks again!