Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

check box design issue after migrating my native script application. #79

Open
naveenkumarrepo opened this issue Feb 11, 2022 · 1 comment

Comments

@naveenkumarrepo
Copy link

I'm using "@nstudio/nativescript-checkbox": "^2.0.4", package for designing the check box in my application. After migrating, the check box design not matching properly.
which was perfectly working properly.

How to fix this design issue?

Image20220211145623

@rob4226
Copy link

rob4226 commented Jan 17, 2024

I have the same issue (using v2.0.5) which is really unfortunate. On Android it is fine, but on iOS the label is always shifted way down like in the picture posted above.

Based on the StackBlitz example here it seems the work around is to use a GridLayout and a separate Label instead of the text attribute of the Checkbox. It's a lot of extra markup but at least it works:

<GridLayout rows="auto" columns="auto,*" class="p-5">
  <CheckBox
    #checkbox
    (checkedChange)="checkedChange()"
    (loaded)="checkboxLoaded($event)"
    [checked]="checkboxValue"
    fontSize="20"
    ios:fillColor="#fff"
    onTintColor="#007A42"
    width="35"
    ios:width="15"
  ></CheckBox>

  <Label
    col="1"
    text="Toggle Me"
    class="ml-1 text-lg text-black"
    android:marginTop="1"
    ios:marginTop="-13"
    (tap)="updateValue(!checkboxValue)"
  ></Label>
</GridLayout>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants