Set width of Switch

Question

I am using Nativescript with Angular and I would like to set the width of a Switch element.

To do this I added:

style="width: 20%; min-width: 20%;"

To the element in the template.

But the width of the element doesn't change when I test it.

Why isn't it working?

Answer 1

Behind the NativeScript's Switch we have android.widget.CompoundButton on Android and UISwitch on iOS. There is no option to change the width of the Switch widget but you can access the native element and modify its native width (if possible). As far as I've seen modifying the width of UISwitch is as simple as marshaling the below code to JavaScript

aSwitch.transform = CGAffineTransformMakeScale(2.0, 2.0);

In NativeScript you can access the native view (iOS or Android) via nativeView property.

For example (TypeScript):

let mySwitch= <Switch>page.getViewById("mySwith");
if (isIOS) {
    let iosSwitch = mySwitch.nativeView;
    iosSwitch.transform = CGAffineTransformMakeScale(2, 2);
}

Following the same principle, you could adopt a native Android solution to adjust the Android counterpart.