Skip to content

bug: fill outline select with fit-content will hide select options #29321

Closed
YoutacRandS-VA/eth2-beaconchain-explorer-app
#2
@ConnorBrennan

Description

@ConnorBrennan

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.
image
image

Expected Behavior

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

Steps to Reproduce

  1. Make an ion select with number values and either a small width or a width set to fit-content
  2. Set interface to popover and fill to outline
  3. Open the select and see the text clipped despite there being room for it

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions