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.

[webfletch]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using "ion-text-wrap" around a label to allow long labels for checkboxes to span multiple lines as described in #27509 this makes the actual checkbox vertically aligned central with the label text due to the shadow element "checkbox-wrapper" having the style "align-items: center". This prevents you from being able to align the checkbox at the top when you have long label text spanning multiple lines.

Expected Behavior

Need to be able to change the vertically alignment for "checkbox-wrapper" to "align-items: flex-start".

Steps to Reproduce

Create a checkbox as follows:

`

   <ion-checkbox [(ngModel)]="item.Checked" labelPlacement="end">
       <div class="ion-text-wrap">This is a really long label for a checkbox that will span onto multiple lines because there is so much text in it</div>
   </ion-checkbox>

`

Code Reproduction URL

https://stackblitz.com/edit/angular-k51j4b?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (C:\Users\WebFletch\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 16.2.14
@angular-devkit/schematics : 16.2.14
@angular/cli : 16.2.14
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.20.4 (C:\Program Files\nodejs\node.exe)
npm : 9.8.1
OS : Windows 10

Additional Information

No response

[webfletch]

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

[brandyscarney]

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?

[webfletch]

@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;
}

[brandyscarney]

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. 🙂​