-
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: 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
@ionic/core package
type: bug
a confirmed bug report
labels
May 10, 2024
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 | | ---| ---| | ![before fix](https://github.com/ionic-team/ionic-framework/assets/6577830/e27c6e3c-3d3a-4889-a44b-5f4a9a6ba552) | ![after fix](https://github.com/ionic-team/ionic-framework/assets/6577830/a05829d6-f776-4f0d-b7eb-cb8177449c90) | <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 | | ---| ---| | ![before fix](https://github.com/ionic-team/ionic-framework/assets/6577830/e27c6e3c-3d3a-4889-a44b-5f4a9a6ba552) | ![after fix](https://github.com/ionic-team/ionic-framework/assets/6577830/a05829d6-f776-4f0d-b7eb-cb8177449c90) | <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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
ion-checkbox on slot
start
usingion-item
produces the same width.I have also tried using lastest dev version published:
@ionic/angular@8.0.2-dev.11714416680.1b4b6d28
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: