bug: Unable to vertically align ion-checkbox using the old or new label syntax when using ion-text-wrap and label text spans multiple lines. about ionic-framework HOT 4 CLOSED

Thank you for the issue! The alignment property can be applied to ion-checkbox to align the checkbox at the top: https://stackblitz.com/edit/angular-k51j4b-ti2q2v?file=src%2Fapp%2Fexample.component.html

There does seem to be an issue where the checkbox doesn't have the same margin as the label when placed inside of an item, but other than that, is this the behavior you are looking for?

from ionic-framework.

This issue also seems to occur if you use the legacy label syntax and it is contained within an ion-item, I have had to use the following workaround to get the alignment correct. The "toggleCheckbox" click event is needed on the ion-label because if the whole thing is not wrapped in an ion-item then clicking the label does not check the box.

HTML

<div class="checklistItem" *ngFor="let item of checklistItems">
  <div class="checkbox">
    <ion-checkbox [(ngModel)]="item.Checked" (ngModelChange)="change(item, $event)"  labelPlacement="end"></ion-checkbox>
    <ion-label class="ion-text-wrap" (click)="toggleCheckbox(item)">{{item.Name}}</ion-label>
  </div>
</div>

CSS

.checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  ion-checkbox {
    margin: 2px 5px 5px 0;
  }

  ion-label {
    margin-top: 3px;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
  }

Typescript

  toggleCheckbox(item) {
    // Toggle the checked state of the item
    item.Checked = !item.Checked;

    // Call change method to handle the checkbox change
    this.change(item, null);
  }

  change(item, event) {

    // DO STUFF

  }

StackBlitz example
https://stackblitz.com/edit/angular-k51j4b-kdzzsu?file=src%2Fapp%2Fexample.component.html%3AL6,src%2Fapp%2Fexample.component.css,src%2Fapp%2Fexample.component.ts

from ionic-framework.

@brandyscarney Yes thank you, that is the behaviour I was looking for, I think I must of dismissed that option when looking at the docs because they were showing horizontal alignment when using "stacked" labels so didn't think it would apply to vertical alignment as well.

Maybe the docs could be updated to include an example with labelPlacement "start" and "end" to show it also works with vertical alignment.

The alignment issue when using ion-item isn't too much of a problem for me because I can remove ion-item from my code, other people that do need ion-item should be able to fix the alignment with the following CSS:

ion-checkbox::part(label) {
  margin-top: 2px;
}

from ionic-framework.

Thanks for the quick response! I agree that the documentation could be improved. I created an issue to update the examples to include this usage here: ionic-team/ionic-docs#3818.

I’ve also marked this as a bug to fix the margin issue when used inside an item, as it’s a pretty simple fix. Thanks for providing a workaround that can be used until the fix is implemented. 🙂​

from ionic-framework.