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

[meriturva]

trafficstars

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/[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

[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;
}

[ionitron-bot[bot]]

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.