Checkbox alignment problem on IOS

[MateusSpadari]

The fill color is "floating" outside the checkbox boundaries ! On android it works normally. I don't know what to do to solve this layout problem. Thanks !!!

(I tested on IOS 12.2 and 13.1)

[nericode]

I have same problem

[MateusSpadari]

@NeriCodec You can replace the checkbox with the standard nativescript switch component

<Switch checked="true" (checkedChange)="onCheckedChange($event)"></Switch>

[mm-spiio]

@MateusSpadari this isn't a solution to the styling problem.... Anyone has a solution? this is still an issue...

[nericode]

@mm-spiio yes, check this.

<StackLayout orientation="horizontal" height="20">
      <CheckBox
        android:class="m-l-10"
        checked="true"
        android:fillColor="#1473e6"
      >
      </CheckBox>
      <Label
        ios:marginLeft="-55"
        android:marginTop="5"
        android:marginLeft="-15"
        text="you text here"
      ></Label>
    </StackLayout>

[aosi87]

I half fixed mine using height=20 on iOS and adding a label inside a horizontal StackLayout to avoid the tap action, or add it if necessary, right now I'm trying to use this as a new directive so I do not have to do this all the time, on android I create a set of margins, looks like working

[gustavost26]

The fill color is "floating" outside the checkbox boundaries ! On android it works normally. I don't know what to do to solve this layout problem. Thanks !!!

(I tested on IOS 12.2 and 13.1)

I'm having the same problem. Has anyone found a permanent solution for this?

[bradmartin]

https://github.com/nstudio/nativescript-plugins/tree/main/packages/nativescript-checkbox try this one out

I'm using this on iOS and it looks pretty good

<CheckBox
                  height="25"
                  verticalAlignment="center"
                  fillColor="#002160"
                  [id]="f.title + '-switch'"
                  [text]="f.title"
                  [checked]="f.isSelected"
                  (checkedChange)="onFilterCheckChange($event, f)"
                  padding="2"
                ></CheckBox>