bug: ion-item + ion-checkbox on 'start' slot not respect width on v8 (v7 was ok) #29423
Closed
3 tasks done
Labels
Comments
|
same for me |
|
This bug is also visible in the docs at https://ionicframework.com/docs/api/item#controls 
|
|
Thank you for submitting the issue! I was able to reproduce it. There shouldn't be a space between those elements. This is currently happening because of the checkbox using a While a fix is being worked on, you can use the following style as a workaround: ion-item ion-checkbox {
flex: initial;
} |
thetaPC
added
package: core
|
radio buttons are also affected: ion-item ion-checkbox, ion-item ion-radio {
flex: initial;
} |
2 tasks
github-merge-queue bot
pushed a commit
that referenced
this issue
May 15, 2024
#29501) Issue number: resolves #29423 --------- ## What is the current behavior? I fixed a bug where icon was collapsing its width when next to a checkbox, radio or toggle to match the styles of select in #29328. This caused a regression for checkboxes, radios, and toggles when slotted inside of an item. Our test coverage for this was not great, as the slotted inputs test in item had so many elements that it was not apparent that this bug was introduced. In addition, the select itself presented the same issue before my PR and this is a regression from the v7 behavior. See the following Codepens to see the regression: - [Ionic v7](https://codepen.io/brandyscarney/pen/jOoPzoL) - [Ionic v8](https://codepen.io/brandyscarney/pen/KKLpoLX) ## What is the new behavior? - Updates the checkbox, radio, select, and toggle to reset the flex property when slotted. - Adds test coverage for the previous fix I did in #29328 where icons were collapsing their width next to checkboxes, radios and toggles. This was reproducible with a div and easier to see in a test so I used a div with a background instead of an icon. - Adds better test coverage for this fix which separates each component (checkbox, radio, select, toggle) into their own screenshot test to make sure the width is shrinking or expanding properly based on where it is located in an item. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before fix 9b59138 | After | | ---| ---| |  |  | <table width="100%"> <tr align="center"> <td width="50%"><b>Before regression fix</b></td> <td width="50%"><b>After</b></td> </tr> <tr> <td width="50%"><img alt="before-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/bb1aea84-6c83-4fbe-96ad-855c1c9cca95"></td> <td width="50%"><img alt="after-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/655dab88-55a9-4961-a7fb-2a3233aa0004"></td> </tr> </table>
sean-perkins
pushed a commit
that referenced
this issue
May 15, 2024
#29501) Issue number: resolves #29423 --------- ## What is the current behavior? I fixed a bug where icon was collapsing its width when next to a checkbox, radio or toggle to match the styles of select in #29328. This caused a regression for checkboxes, radios, and toggles when slotted inside of an item. Our test coverage for this was not great, as the slotted inputs test in item had so many elements that it was not apparent that this bug was introduced. In addition, the select itself presented the same issue before my PR and this is a regression from the v7 behavior. See the following Codepens to see the regression: - [Ionic v7](https://codepen.io/brandyscarney/pen/jOoPzoL) - [Ionic v8](https://codepen.io/brandyscarney/pen/KKLpoLX) ## What is the new behavior? - Updates the checkbox, radio, select, and toggle to reset the flex property when slotted. - Adds test coverage for the previous fix I did in #29328 where icons were collapsing their width next to checkboxes, radios and toggles. This was reproducible with a div and easier to see in a test so I used a div with a background instead of an icon. - Adds better test coverage for this fix which separates each component (checkbox, radio, select, toggle) into their own screenshot test to make sure the width is shrinking or expanding properly based on where it is located in an item. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before fix 9b59138 | After | | ---| ---| |  |  | <table width="100%"> <tr align="center"> <td width="50%"><b>Before regression fix</b></td> <td width="50%"><b>After</b></td> </tr> <tr> <td width="50%"><img alt="before-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/bb1aea84-6c83-4fbe-96ad-855c1c9cca95"></td> <td width="50%"><img alt="after-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/655dab88-55a9-4961-a7fb-2a3233aa0004"></td> </tr> </table>
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
ion-checkbox on slot
startusingion-itemproduces the same width.I have also tried using lastest dev version published:
@ionic/[email protected]Expected Behavior
Same behaviour of v7
Steps to Reproduce
Just see the v8 sample on the documentation:
https://stackblitz.com/edit/angular-sbr4cx?file=src%2Fapp%2Fexample.component.html
Working sample based on v7:
https://stackblitz.com/edit/angular-wgrddc?file=src%2Fapp%2Fexample.component.html
Code Reproduction URL
https://stackblitz.com/edit/angular-sbr4cx
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (C:\Users\diego\AppData\Roaming\nvm\v20.12.2\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.0.2-dev.11714416680.1b4b6d28
@angular-devkit/build-angular : 17.3.6
@angular-devkit/schematics : 17.3.6
@angular/cli : 17.3.6
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : 6.0.0
@capacitor/core : 6.0.0
@capacitor/ios : 6.0.0
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.12.2 (C:\Program Files\nodejs\node.exe)
npm : 10.5.0
OS : Windows 10
Additional Information
No response
The text was updated successfully, but these errors were encountered: