search

nstudio / nativescript-checkbox

NativeScript plugin for checkbox UI component
Other
119 stars 56 forks source link

Checkbox alignment problem on IOS #123

Open MateusSpadari opened 4 years ago

MateusSpadari commented 4 years ago

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)

Captura de Tela 2020-02-20 às 16 09 10
nericode commented 4 years ago

I have same problem

Captura de Pantalla 2020-02-26 a la(s) 9 38 14

MateusSpadari commented 4 years ago

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

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

mm-spiio commented 4 years ago

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

nericode commented 4 years ago

@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 commented 4 years ago

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 commented 1 year ago

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)

Captura de Tela 2020-02-20 às 16 09 10

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

bradmartin commented 1 year ago

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>