Make WordPress Core

Opened 21 months ago

Last modified 9 months ago

#54211 new defect (bug)

Small css bug when using customize-controls in customizer.php

Reported by: akissz's profile akissz Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 3.4
Component: Customize Keywords: needs-design-feedback 2nd-opinion
Focuses: Cc:

Description

The form code is wrong in the css for some elements. To reproduce problem, add in customizer.php custom two customize-control-radio and two customize-control-select. You see the 'radio' has extra 10px padding on bottom. The 'select' is missing the 10px padding. So it looks very bad when you organize the elements. So either remove the 10px or add the 10px to the 'select' css.

Attachments (3)

withpadding.png (31.2 KB) - added by akissz 20 months ago.
with padding on radio is ok
withoutpadding.png (30.1 KB) - added by akissz 20 months ago.
without padding on select is not ok
withpaddingbetter.png (30.6 KB) - added by akissz 20 months ago.
with padding on select is much better

Download all attachments as: .zip

Change History (12)

#1 follow-up: @aezazshekh
20 months ago

  • Keywords needs-screenshots added

Hello @akissz. Thank you for this ticket.

Can u send me screenshots? so I can understand better.

@akissz
20 months ago

with padding on radio is ok

@akissz
20 months ago

without padding on select is not ok

@akissz
20 months ago

with padding on select is much better

#2 in reply to: ↑ 1 @akissz
20 months ago

Replying to aezazshekh:

Hello @akissz. Thank you for this ticket.

Can u send me screenshots? so I can understand better.

I uploaded 3 files so you can see now.

Last edited 20 months ago by akissz (previous) (diff)

#3 @akissz
20 months ago

It might be best to remove the padding instead. What do you think?

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


20 months ago

#5 @Boniu91
20 months ago

  • Keywords needs-design-feedback added; needs-screenshots removed

It's reproducible on Twenty Twenty-One.

Test Report

Env

  • WordPress 5.8 and 5.8.1
  • Theme: Twenty Twenty-One

Steps to test

  1. Go to the Customizer section
  2. Choose Home page settings tab
  3. Inspect Radio buttons (Your home page displays) and Select (Home page) sections
  4. customize-control-dropdown-pages class doesn't have padding, customize-control-radio has padding

#6 @dlh
20 months ago

  • Keywords 2nd-opinion added
  • Version set to 3.4

The extra padding on radio controls is relative to most (all?) control types, not just select controls. So I'm not sure that adding padding to just select controls addresses the concern.

The extra padding was added in [20184] and targeted specifically at radios, although it's not clear to me why. I don't have an installation of WordPress 3.4 available currently. Did the padding serve a purpose then that isn't relevant anymore?

#7 @akissz
20 months ago

Looking again, I think the padding should be removed from radio.

This ticket was mentioned in Slack in #core by dlh. View the logs.


20 months ago

#9 @robinwpdeveloper
9 months ago

Checked Twenty Twenty-One. Issue is reproducible.
I also vote to remove the padding from radio.

Note: See TracTickets for help on using tickets.