Alignment issue in ios with text wrap

[shrutisinghal]

I have 3-4 liner content with checkbox. In android it is working fine but in ios I am facing alignment issues. Is there any way I can fix it?

[dali-gharbi]

hi @bradmartin i have a similar issue only on ios :

        <StackLayout 
           class="p-10 list-group" 
           style="padding-top: 5" 
            *ngFor="let item of items" >
            <CheckBox 
                (loaded)="checkBoxLoaded($event)"
                class="list-group-item-text  m-l-10 p-4" 
                ios:font-size="20" 
                id="{{item.id}}" 
                [(ngModel)]="item.isSelected"  
                [text]="item.name" 
                [checked]="item.isSelected">
            </CheckBox>                
        </StackLayout>

the problem is due to this line ? : _this._iosCheckbox = BEMCheckBox.alloc().initWithFrame(CGRectMake(0, 0, 21, 21)); is there any way to extend it and center the x alignement ?

[bradmartin]

Not entirely sure, have not had time to look into. Thanks for finding the line causing it. Let me know if anyone has any more info or wants to get a PR moving to help fix this.

[fthuin]

@bradmartin I had a problem similar to this one but for me the text is higher than the checkbox, not lower.

Removing the + 3 on this line https://github.com/nstudio/nativescript-checkbox/blob/master/checkbox.ios.ts#L203 seems to perfectly align the text with the checkbox. Why is there a + 3 ? Would you accept a PR to fix this ?

[VimalKumarS]

Any pointer, facing same issue.

[seveneye]

Workaround is to use stacklayout and margin top.

<StackLayout orientation="horizontal">
    <CheckBox class="checkbox" ios:marginTop="15"></CheckBox>

    <Label text="My really long description that gets to multiline which affects the alignment of the checbox." textWrap="true"></Label>
</StackLayout>

[Lelelo1]

I have same problem as fthuin . text appearing higher than checkbox - using FlexboxLayout - but works in StackLayout.