Skip to content

GDB-13594: Align radio button circle#2658

Draft
boyan-tonchev wants to merge 1 commit intomasterfrom
GDB-13594-align-radio-buttons-circles
Draft

GDB-13594: Align radio button circle#2658
boyan-tonchev wants to merge 1 commit intomasterfrom
GDB-13594-align-radio-buttons-circles

Conversation

@boyan-tonchev
Copy link
Copy Markdown
Contributor

What

The radio button circle was not centered.

Why

The radio buttons were custom-styled to look consistent across all browsers. Centering was done using margins, which can cause misalignment because different browsers calculate margins differently.

How

Changed the radio button to use a flex container and applied horizontal and vertical centering.

Screenshots

image

Checklist

  • Branch name
  • Target branch
  • Commit messages
  • Squash commits
  • MR name
  • MR Description
  • Tests
  • Browser support verified

## What
The radio button circle was not centered.

## Why
The radio buttons were custom-styled to look consistent across all browsers. Centering was done using margins, which can cause misalignment because different browsers calculate margins differently.

## How
Changed the radio button to use a flex container and applied horizontal and vertical centering.
@sonarqubecloud
Copy link
Copy Markdown


input[type="radio"]:checked::after {
content: "";
display: block;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, I shall check this out, but I though that in order to give the content some width it must have display block or whatever but not inline or default.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh I see it now. It's the parent that have display:flex and causing the children to become flex items behaving like block elements.

@svilenvelikov
Copy link
Copy Markdown
Collaborator

Radio buttons doesn't look OK to me
image
image
image

@svilenvelikov svilenvelikov marked this pull request as draft January 29, 2026 12:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants