ionic-team / ionic-team/ionic-framework

bug: ion-select radio button inner sometimes not exactly centered

Open
#30,122 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

The radio button inner of a selected element is on some display resolutions not perfectly centered:
![image](https://github.com/user-attachments/assets/2281faa7-7e6d-4afb-8593-e7ccfa24d3a9)

### Expected Behavior

The radio button inner should be centered on all devices

### Steps to Reproduce

look at radio buttons on different devices. Easily reproduceable if application is run in a web browser

### Code Reproduction URL

https://stackblitz.com/run?file=package.json

### Ionic Info

Ionic:

Ionic CLI : 6.18.0

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v18.17.1
npm : 10.0.0
OS : Windows 10

### Additional Information

It seems as the inner of the radio button is positioned absolute with pixels, i temporarily fixed the problem by positioning it with the following css:
.alert-radio-icon {
display: flex;
align-items: center;
justify-content: center;
}

.alert-radio-inner {
position: unset;
}

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.