How do i change width of ToggleItem in 13.1?

[mathias]

We're moving to 13.1 and i'd like to use the new cool ToggleSwitch so i'm replacing it everywhere. However, i find it too wide and high, so i'd like to resize it.

A noob question, i suppose but i can't get it to work.

I've tried in source code:

ToggleItem boolItem = new ToggleItem(dataSourceField.getName(), dataSourceField.getTitle());
boolItem.setWidth(30);

i tried changing the css:

.toggleSwitch,
.toggleSwitchOff,
.toggleSwitchOn {
  /* General styles for the toggle switch */
  width: 30px;

i didn't find any reference to ToggleItem in load_skin so i just tried adding:

if (isc.ToggleItem) {
isc.ToggleItem.addProperties({
height: formItemHeight,
width: 30
});
}

Nothing works. I'm sure it's super easy but i can't find it...

[mathias]

Hey guys, anybody feel up for giving me a tip? I really don't want to roll back to the ugly checkbox :)

[Isomorphic]

hi mathias - apologies for the delay.

You can set the width on isc.ToggleSwitch if you want to do it globally, or via the "toggle" autoChild of ToggleItem, with a call to ToggleItem.setAutoChildProperties("toggle", (ToggleSwitch)props).

Note that while the constructor for this autoChild is doc'd on ToggleItem, the autoChild itself is not - we'll correct that. But you can still use it in the meantime.