primefaces/primeng

Radio button not centered on primeng.org

Open

#17,642 opened on Feb 11, 2025

View on GitHub
 (5 comments) (0 reactions) (0 assignees)CSS (10,366 stars) (4,585 forks)batch import
Resolution: Help Wantedgood first issue

Description

Describe the bug

This is regarding an issue I believe was wrongly closed: https://github.com/primefaces/primeng/issues/7873

Me and others in my organization all have this same issue where the radio button inner circle isn't centered. Attached is a video of the bug in action, this becomes especially noticable when zooming in or out. I was able to recreate this also in the attached Stackblitz repos.

https://github.com/user-attachments/assets/74c06c5b-460d-40ef-b3f6-b16952947e20

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

I am sadly not knowledgable enough to know how to correct this. I don't even know what causes this. If it helps I found a similar bug solved on a different component library: https://github.com/carbon-design-system/carbon/pull/6097/files

Reproducer

https://stackblitz.com/edit/github-ze9i24ka-z8m17tsk?file=src%2Fapp%2Fapp.component.html

Environment

My display resolution is 1920x1080 with a scale of 125%. Changing scale or resolution didn't do anything. However on my 4k screen the button seems to always have a centered inner circle.

Angular version

19

PrimeNG version

v19

Node version

No response

Browser(s)

Microsoft Edge for Business Version 132.0.2957.140, Firefox 135.0

Steps to reproduce the behavior

  1. Go to https://primeng.org/radiobutton or provided Stackblitz repos
  2. Change preset to Material (this theme shows it the most obvious)
  3. Zoom in and out (ctrl + scroll), you should see the button not be centered anymore.

Expected behavior

The button inner circle should stay centered.

Contributor guide

Tech stack
angularcsstypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the CSS styling of the PrimeNG radio button component, particularly the inner circle alignment. Review the similar fix in carbon design system PR (https://github.com/carbon design system/carbon/pull/6097/files) for inspiration. Check if the issue is related to CSS transforms or box model centering. The bug is most noticeable with the Material preset and zoom levels.