Skip to content

fix: elevate CSS specificity for BS5 radio/checkbox group label margin#1308

Draft
elnelson575 wants to merge 1 commit into
mainfrom
fix/bs5-radio-button-spacing
Draft

fix: elevate CSS specificity for BS5 radio/checkbox group label margin#1308
elnelson575 wants to merge 1 commit into
mainfrom
fix/bs5-radio-button-spacing

Conversation

@elnelson575
Copy link
Copy Markdown
Contributor

@elnelson575 elnelson575 commented May 8, 2026

Summary

  • Bumps CSS specificity on bslib's BS5 radio/checkbox group label-spacing rule by doubling the class (.shiny-input-radiogroup.shiny-input-radiogroup) — a Garrick-suggested idiom that signals "this is purely for specificity" without changing which elements are matched.
  • This makes bslib's rule win the specificity tie against Shiny's inline-specific override (.shiny-input-radiogroup.shiny-input-container-inline), so inline radio/checkbox groups now use the same calculated label-to-options spacing as their stacked counterparts.
  • Rebuilt inst/css-precompiled/5/bootstrap.min.css from the updated SCSS.
  • Adds NEWS entries for this fix and for fix: fix bs5 chevron on selectInput(selectize=FALSE) #1307 (BS5 selectInput(selectize = FALSE) chevron fix).

What changes visually

Stacked (vertical / many-choice) groups are unchanged. Inline groups gain ~2px of breathing room between the group label and the first option so all three variants are consistent.

Computed margin-top on .shiny-options-group:

main this PR
Vertical −3.4px −3.4px
Inline −1px −3.4px
Many −3.4px −3.4px

Before (main)

After (this PR)

Test plan

  • Verify vertical radioButtons() label spacing is unchanged
  • Verify inline radioButtons() label spacing now matches vertical
  • Verify vertical checkboxGroupInput() label spacing is unchanged
  • Verify inline checkboxGroupInput() label spacing now matches vertical

@elnelson575 elnelson575 force-pushed the fix/bs5-radio-button-spacing branch from 4f0136c to 40e324d Compare May 11, 2026 15:51
Comment on lines +59 to +60
.shiny-input-container.shiny-input-checkboxgroup,
.shiny-input-container.shiny-input-radiogroup {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

A trick that I like to use for increasing specificity without changing the rule is to duplicate the class name. It's unusual, but .foo.foo doubles the specificity of .foo. It also serves as a signal that the extra class is included only for specificity reasons, whereas adding an additional class could fail if the classes change and looks like it's included for semantic reasons.

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.

2 participants