bug: Ion Select Popover clips unnecessarily due to invisible radio button overlapping text

[ConnorBrennan]

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

v7.x

Current Behavior

When making a small ion-select (such as one for page numbers), the invisible radio button overlaps the text, causing it to be unreadable. This is because the radio button is hidden by reducing its opacity to 0, rather than applying display: none __

Expected Behavior

The radio button should not take up space in the select popover

Steps to Reproduce

1. Set ion app to md (unsure if issue also presents on ios)
2. Make an ion select with number values and a small width (65 pixels should work, it will crop double digit values)
3. Set the interface to popover
4. Open the select and see the text clipped when there's still plenty of room.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (C:\Users\505449\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 7.6.5 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules\@ionic\angular) @angular-devkit/build-angular : 15.2.10 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules\@angular-devkit\build-angular) @angular-devkit/schematics : 15.2.10 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules\@angular-devkit\schematics) @angular/cli : 15.2.10 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules\@angular\cli) @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : not installed @capacitor/android : not installed @capacitor/core : 5.4.0 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules\@capacitor\core) @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v18.16.1 (C:\Program Files\nodejs\node.exe) npm : 9.5.1 OS : Windows 10

Additional Information

Adding this code to the global CSS solves the issue without appearing to compromise functionality. ion-select-popover { ion-radio::part(container) { display: none; } } If it cannot be set to display: none, this also produced the same result: ion-select-popover { ion-radio::part(container) { width: 0px; overflow: hidden; } }

Resolving should simply involve changing ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container) { opacity: 0; } to anything that actually takes the radio button out of the flow, instead of just making it transparent. As well as making sure it doesn't also present on ios, of course.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[averyjohnston]

This issue is being closed due to lack of a reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!