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

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. #29837

Closed
3 tasks done
webfletch opened this issue Sep 5, 2024 · 5 comments · Fixed by #29850 · May be fixed by l00pinfinity/devvscape-code-humor#71
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@webfletch
Copy link

Prerequisites

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

@ionitron-bot ionitron-bot bot added the triage label Sep 5, 2024
@webfletch
Copy link
Author

webfletch commented Sep 6, 2024

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

@webfletch webfletch changed the title bug: Unable to vertically align ion-checkbox when using the new label syntax if using ion-text-wrap and text spans multiple lines. 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. Sep 6, 2024
@brandyscarney
Copy link
Member

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?

@brandyscarney brandyscarney added the needs: reply the issue needs a response from the user label Sep 6, 2024
@ionitron-bot ionitron-bot bot removed the triage label Sep 6, 2024
@webfletch
Copy link
Author

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

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Sep 6, 2024
@brandyscarney brandyscarney added package: core @ionic/core package type: bug a confirmed bug report labels Sep 9, 2024
@ionitron-bot ionitron-bot bot removed triage labels Sep 9, 2024
@brandyscarney
Copy link
Member

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

github-merge-queue bot pushed a commit that referenced this issue Sep 10, 2024
…29850)

Issue number: resolves #29837

---------

## What is the current behavior?
The checkbox is not aligned properly to the top when using a long label
with `alignment="start"` inside of an `ion-item`:

```html
<ion-item>
  <ion-checkbox justify="start" alignment="start">
    <ion-label class="ion-text-wrap">
      Enable Notifications Enable Notifications Enable Notifications
    </ion-label>
  </ion-checkbox>
</ion-item>
```

## What is the new behavior?
- Applies the same margin to the `.native-wrapper` (checkbox) as the
label.
- Adds a screenshot test to verify the alignment

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

| Before | After |
| --- | --- |
|
![before](https://github.com/user-attachments/assets/53579523-e8b5-4152-ae91-14847cb395e4)
|
![after](https://github.com/user-attachments/assets/0d7315ed-3294-4a27-82fe-6900eb9db1c0)
|
|
![before](https://github.com/user-attachments/assets/ca025a94-4ef7-44b4-85d0-5183e4326814)
|
![after](https://github.com/user-attachments/assets/fab60703-1196-48e8-a485-2f33c4893aba)
|

- [Label
Preview](https://ionic-framework-git-rou-11163-ionic1.vercel.app/src/components/checkbox/test/label)
- [Item
Preview](https://ionic-framework-git-rou-11163-ionic1.vercel.app/src/components/checkbox/test/item)

> [!NOTE]
> The alignment on the Material Design checkbox is still slightly off. I
could add margin directly to its checkbox but then it would change the
margin of the checkbox in all use cases.
Copy link

ionitron-bot bot commented Oct 10, 2024

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Oct 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
2 participants