bug: Ion Select Popover clips unnecessarily due to invisible radio button overlapping text #28987
Closed
3 tasks done
Labels
ionitron: needs reproduction
a code reproduction is needed from the issue author
Prerequisites
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
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.
The text was updated successfully, but these errors were encountered: