bug: ion-item + ion-checkbox on 'start' slot not respect width on v8 (v7 was ok)

[meriturva]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

ion-checkbox on slot start using ion-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

[danielehrhardt]

same for me

[capc0]

This bug is also visible in the docs at https://ionicframework.com/docs/api/item#controls

[thetaPC]

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 flex style.

While a fix is being worked on, you can use the following style as a workaround:

ion-item ion-checkbox {
  flex: initial;
}

[capc0]

radio buttons are also affected:

ion-item ion-checkbox, ion-item ion-radio {
  flex: initial;
}