Skip to content

Fix checked radio input not centered #3071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
truongwp wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix checked radio input not centered #3071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/frm_admin.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions resources/scss/admin/components/form/_fields-part2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
.frm_scale input[type="radio"],
.frm_radio input[type="radio"],
.frm_checkbox input[type="checkbox"] {
width: 15px;
min-width: 15px;
height: 15px;
width: 16px;
min-width: 16px;
height: 16px;
Comment on lines +13 to +15
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify that tablet media queries properly override these dimensions

# Check tablet media query file for responsive sizing
rg -A2 -B2 'frm_radio input\[type="radio"\]|frm_checkbox input\[type="checkbox"\]' resources/scss/admin/media-queries/_screen-tablet.scss

Repository: Strategy11/formidable-forms

Length of output: 389

🏁 Script executed:

# First, let's see the full context of the changed lines and surrounding code
cat -n resources/scss/admin/components/form/_fields-part2.scss | head -30

Repository: Strategy11/formidable-forms

Length of output: 1034

🏁 Script executed:

# Check if there are any other responsive rules that might affect these inputs
rg -A3 'frm_radio input\[type="radio"\]|frm_checkbox input\[type="checkbox"\]' resources/scss/admin/media-queries/

Repository: Strategy11/formidable-forms

Length of output: 936

🏁 Script executed:

# Verify git history to see what the change actually was (before/after)
git diff HEAD~1 resources/scss/admin/components/form/_fields-part2.scss | head -50

Repository: Strategy11/formidable-forms

Length of output: 257

🏁 Script executed:

# Search all media query files for height and min-width overrides for these inputs
rg 'height|min-width' resources/scss/admin/media-queries/ -B2 -A2 | grep -A2 -B2 'input\[type="radio"\]\|input\[type="checkbox"\]'

Repository: Strategy11/formidable-forms

Length of output: 381

🏁 Script executed:

# Also check the main responsive files to see full picture
ls -la resources/scss/admin/media-queries/

Repository: Strategy11/formidable-forms

Length of output: 520

🏁 Script executed:

# Check all responsive files for complete input rules
for file in resources/scss/admin/media-queries/*.scss; do
  echo "=== $(basename $file) ===";
  rg -A5 'input\[type="radio"\]|input\[type="checkbox"\]' "$file" | grep -E "(width|height|min-width|input\[type)" | head -20;
done

Repository: Strategy11/formidable-forms

Length of output: 655

🏁 Script executed:

# Let's also check the original _fields.scss to see base sizing there
rg -A10 'input\[type="radio"\]|input\[type="checkbox"\]' resources/scss/admin/components/form/_fields.scss | head -40

Repository: Strategy11/formidable-forms

Length of output: 330

🏁 Script executed:

# Verify the exact content of _fields.scss to confirm no min-width/height
cat -n resources/scss/admin/components/form/_fields.scss | grep -A15 'input\[type="radio"\]'

Repository: Strategy11/formidable-forms

Length of output: 503

Add responsive overrides for min-width and height, or reconsider the base sizing approach.

The change introduces a responsive design issue: while the responsive rules override width to 25px (tablet) and 18px (single-entry), they don't override min-width or height (both remain 16px). This creates rectangular inputs at larger breakpoints instead of proportional sizing, and min-width: 16px may constrain the intended width expansion.

The original base rule in _fields.scss only sets width and padding, without min-width or height. Either:

  1. Remove min-width and height from the base styles and rely only on width (consistent with the original pattern), OR
  2. Update the responsive rules in _screen-tablet.scss to override all three properties (e.g., width: 25px; min-width: 25px; height: 25px;)

Verify your intended layout and update responsive rules accordingly.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@resources/scss/admin/components/form/_fields-part2.scss` around lines 13 -
15, The base rule in resources/scss/admin/components/form/_fields-part2.scss
adds min-width: 16px and height: 16px which conflicts with responsive overrides
that only change width; either remove min-width and height from the base (so
this file mirrors _fields.scss which only sets width and padding) or update the
responsive rules (e.g., in
resources/scss/admin/components/form/_screen-tablet.scss and the single-entry
breakpoint) to explicitly override min-width and height to match the responsive
width (e.g., set min-width and height to 25px for tablet and 18px for
single-entry) so the inputs remain square and proportional across breakpoints.

border: 1px solid var(--grey-300);
box-shadow: var(--box-shadow-sm);
-webkit-appearance: none;
Expand Down
Loading