-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
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
Comments
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
CSS
Typescript
StackBlitz example |
Thank you for the issue! The 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 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:
|
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. 🙂 |
…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.
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. |
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:
`
`
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
The text was updated successfully, but these errors were encountered: