Make WordPress Core

Opened 3 years ago

Last modified 21 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 3 years ago.
with padding on radio is ok
withoutpadding.png (30.1 KB) - added by akissz 3 years ago.
without padding on select is not ok
withpaddingbetter.png (30.6 KB) - added by akissz 3 years ago.
with padding on select is much better

Download all attachments as: .zip

Change History (12)

#1 follow-up: @aezazshekh
3 years ago

  • Keywords needs-screenshots added

Hello @akissz. Thank you for this ticket.

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

@akissz
3 years ago

with padding on radio is ok

@akissz
3 years ago

without padding on select is not ok

@akissz
3 years ago

with padding on select is much better

#2 in reply to: ↑ 1 @akissz
3 years 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 to the original post I think, so not to a reply. As you can see padding needs to be added or removed from one or the other. Probably added, as I display in the example.

Version 0, edited 3 years ago by akissz (next)

#3 @akissz
3 years 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.


3 years ago

#5 @Boniu91
3 years 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
3 years 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
3 years 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.


3 years ago

#9 @robinwpdeveloper
21 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.