WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 months ago

#52554 closed defect (bug) (invalid)

Twenty Twenty incorrectly formats check boxes and radio buttons...

Reported by: hometowntrailers Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

Twenty Twenty sets inputs to be a min-width of 1.5em by default.

That makes checkboxes look really long and not square.

See screenshot: https://d.pr/i/wYdIaz This illustrates both the wrong result, as well as the pertinent code.

Change History (7)

#1 @SergeyBiryukov
9 months ago

  • Component changed from Themes to Bundled Theme

#2 follow-up: @sabernhardt
9 months ago

@hometowntrailers Thanks for the report!

The styles also set the width to 1.5rem, but that is crossed out in the inspector. Could you scroll down to see what might override that width?

#3 in reply to: ↑ 2 @hometowntrailers
9 months ago

Replying to sabernhardt:

@hometowntrailers Thanks for the report!

The styles also set the width to 1.5rem, but that is crossed out in the inspector. Could you scroll down to see what might override that width?

That's overridden by my custom CSS:

/* fix Twenty Twenty bug */
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
    width: 10px !important;
}

#4 follow-up: @sabernhardt
9 months ago

Is there another width setting that would compute to around 50 pixels? (including any padding)

Last edited 9 months ago by sabernhardt (previous) (diff)

#5 in reply to: ↑ 4 @hometowntrailers
9 months ago

  • Summary changed from Twenty Twenty incorrectly formats check boxes... to Twenty Twenty incorrectly formats check boxes and radio buttons...

Replying to sabernhardt:

Is there another width setting that would compute to around 50 pixels? (including any padding)

I don't know, and I'm not a programmer. Sorry.

Just to be clear, this affects both checkboxes and radio buttons.

#6 @sabernhardt
9 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

@hometowntrailers Thanks for reporting the bug. After finding your site, I found the problem in WooCommerce, not the theme. Their theme-specific style .single-product form.cart input{width:5em} made checkboxes and radio buttons about 67 pixels wide.

It's now reported on the WooCommerce support forum for them to address in the plugin:
https://wordpress.org/support/topic/checkboxes-and-radio-buttons-are-too-wide-in-twenty-twenty/

If you would like, you could add to the discussion there.

Note: See TracTickets for help on using tickets.