bug: fill outline select with fit-content will hide select options #29321
Labels
Comments
sean-perkins
changed the title
sean-perkins
added
package: core
2 tasks
github-merge-queue bot
pushed a commit
that referenced
this issue
Apr 29, 2024
…ine (#29408) Issue number: resolves #29321 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using a select with `fill="outline"`, `interface="popover"` and a width that fits the content of the options, the select options are not visible. The hidden radio is covering the text of the radio text options. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Select options are visible and no longer covered by the hidden radio container ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `8.0.2-dev.11714165638.13e7dd5b` Reproduction (issue): https://stackblitz.com/edit/angular-mndtkr Reproduction (with dev-build): https://stackblitz.com/edit/angular-mndtkr-d7wsnp Reproduction steps: 1. Open the select 2. Observe: The popover displays the options, but the options are not visible/readable to the user 3. Use the dev-build 4. Open the select 5. Observe: The popover displays the options and they are visible/readable to the user (5, 10, 15).
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
When making a small ion-select (such as one for page numbers) and using fill="outline", 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. This combined with the size of the internal margins causes the value to be partially or completely covered.
Expected Behavior
The radio button should not take up space in the select popover
Steps to Reproduce
Code Reproduction URL
https://stackblitz.com/edit/angular-mndtkr?file=src%2Fapp%2Fexample.component.html
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
No response
The text was updated successfully, but these errors were encountered: