WordPress.org

Make WordPress Core

Opened 3 weeks ago

Closed 13 days ago

Last modified 6 days 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
3 weeks ago

  • Component changed from Themes to Bundled Theme

#2 follow-up: @sabernhardt
3 weeks 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
3 weeks 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
3 weeks ago

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

Last edited 3 weeks ago by sabernhardt (previous) (diff)

#5 in reply to: ↑ 4 @hometowntrailers
13 days 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
13 days 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.