Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(checkbox): align checkbox properly in item using start alignment (#…
…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:/user-attachments/assets/53579523-e8b5-4152-ae91-14847cb395e4) | ![after](https:/user-attachments/assets/0d7315ed-3294-4a27-82fe-6900eb9db1c0) | | ![before](https:/user-attachments/assets/ca025a94-4ef7-44b4-85d0-5183e4326814) | ![after](https:/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.
- Loading branch information