search

nstudio / nativescript-checkbox

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

Alignment issue in ios with text wrap #80

Open shrutisinghal opened 6 years ago

shrutisinghal commented 6 years ago

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?

screen shot 2018-02-08 at 6 53 41 pm
dali-gharbi commented 6 years ago

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

capture

        <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 commented 6 years ago

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 commented 5 years ago

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

Any pointer, facing same issue.

seveneye commented 5 years ago

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 commented 5 years ago

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