WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#42157 closed defect (bug) (fixed)

Labels are misaligned for radio and checkbox controls in customizer

Reported by: sayedwp Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch has-screenshots commit
Focuses: ui Cc:
PR Number:

Description

Before:

https://user-images.githubusercontent.com/6297436/31345068-392a9142-ad32-11e7-8015-a7b53dd352d3.png

After:

https://user-images.githubusercontent.com/6297436/31345100-5b095668-ad32-11e7-9980-bbfc6656675a.png

I think its due to the markup refactoring.

Attachments (11)

42157.patch (278 bytes) - added by Shital Patel 2 years ago.
Change in forms.css (vertical-align: top;)
42157.2.patch (430 bytes) - added by Shital Patel 2 years ago.
Update customize-controls.css file
42157.3.patch (659 bytes) - added by Shital Patel 2 years ago.
Update customize-controls.css file
42157.4.diff (486 bytes) - added by subrataemfluence 2 years ago.
42157.5.diff (2.0 KB) - added by sayedwp 2 years ago.
radios-desktop.png (62.6 KB) - added by westonruter 2 years ago.
radios-mobile.png (77.1 KB) - added by westonruter 2 years ago.
checkbox-mobile.png (33.0 KB) - added by westonruter 2 years ago.
checkbox-desktop.png (25.2 KB) - added by westonruter 2 years ago.
menu-locations-desktop.png (63.5 KB) - added by westonruter 2 years ago.
menu-locations-mobile.png (72.6 KB) - added by westonruter 2 years ago.

Download all attachments as: .zip

Change History (28)

#1 @westonruter
2 years ago

  • Keywords good-first-bug needs-patch added
  • Milestone changed from Awaiting Review to 4.9

This is probably a regression introduced in #33085 via [41740] as the label element no longer wraps the radio input.

@Shital Patel
2 years ago

Change in forms.css (vertical-align: top;)

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


2 years ago

#3 @subrataemfluence
2 years ago

  • Keywords has-patch added; needs-patch removed

#4 @subrataemfluence
2 years ago

@shitalmarakana I have tested your patch in Chrome and Firefox and it looks good. All radio buttons seem to be aligned properly inside customizer now. Thank you!

#5 @sayedwp
2 years ago

  • Summary changed from Labels are misaligned for radio controls in customizer to Labels are misaligned for radio and checkbox controls in customizer

@Shital Patel I think updating the label in forms.css file would affect other labels in WordPress specially in post edit and general options page as I can imagin. You might want to be a bit more specific and add this css in
wp-admin/css/customize-controls.css file.

.customize-control-radio label,
.customize-control-checkbox label {
	vertical-align: top;
}

I just noticed checkboxe labels like "Display Site Title and Tagline" in "Site Identity" section is also not aligned which would be fixed with the above css.
But then again it would affect other customizer controls like "Menu Locations" checkboxes, so those would need to be fixed as well.

@Shital Patel
2 years ago

Update customize-controls.css file

#6 @sayedwp
2 years ago

Thanks, you may want to consider these as well.

But then again it would affect other customizer controls like "Menu Locations" checkboxes, so those would need to be fixed as well.

https://user-images.githubusercontent.com/6297436/31392094-fe890b80-adf5-11e7-9967-f45887e7b227.png

Also checkboxes and radio lables would need some care in small screens.

https://user-images.githubusercontent.com/6297436/31393180-c3003f68-adf8-11e7-8f82-7029dd75012c.png
https://user-images.githubusercontent.com/6297436/31393288-069b4394-adf9-11e7-93c8-cce3b327af48.png

@Shital Patel
2 years ago

Update customize-controls.css file

#7 @subrataemfluence
2 years ago

@sayedwp Not sure if this works but I have tested my patch in different device widths (320 to 1366) and they seem to be OK. Also if this works, the same rule needs to be added in custom-constrols-rtl.css as well. Patch follows.

Please let me know what you think.
Thank you.

#8 @sayedwp
2 years ago

@Shital Patel Thanks that's almost perfect, I have just made some improvements in your patch.

@subrataemfluence Sorry, I am not aware of rtl support in customizer.

@westonruter I found one more css issue while checking this one in small screen ( was also there in 4.8 ) which I have covered in my patch.

https://user-images.githubusercontent.com/6297436/31399887-604bf4f8-ae0b-11e7-868b-0eacc9f46469.png

@sayedwp
2 years ago

#9 @westonruter
2 years ago

  • Keywords good-first-bug removed
  • Owner set to melchoyce
  • Status changed from new to reviewing

#10 @westonruter
2 years ago

@sayedwp @subrataemfluence RTL CSS will be generated automatically as part of the build. No need to supply any patch for RTL files.

#11 @melchoyce
2 years ago

Looks good to me on Firefox and Chrome 👍

Can I get some help testing Safari and IE11+?

#12 @westonruter
2 years ago

  • Keywords has-screenshots added

Safari looks good. See screenshots 👆

#13 @westonruter
2 years ago

  • Keywords commit added
  • Owner changed from melchoyce to westonruter
  • Status changed from reviewing to accepted

#14 @westonruter
2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 41817:

Customize: Fix vertical alignment of radio and checkbox inputs after [41740].

Props Shital Patel, subrataemfluence, sayedwp.
Amends [41740].
See #33085.
Fixes #42157.

#15 @westonruter
2 years ago

In 42152:

Customize: Prevent nav menu location assignment checkbox change from increasing height by 1px.

Props obenland.
Amends [41817].
See #42157.
Fixes #42492.

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


2 years ago

#17 @SergeyBiryukov
2 years ago

In 42436:

Customize: Prevent nav menu location assignment checkbox change from increasing height by 1px.

Props obenland.
Amends [41817].
Merges [42152] to the 4.9 branch.
See #42157.
Fixes #42492.

Note: See TracTickets for help on using tickets.