WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 6 months 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:

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 9 months ago.
Change in forms.css (vertical-align: top;)
42157.2.patch (430 bytes) - added by Shital Patel 9 months ago.
Update customize-controls.css file
42157.3.patch (659 bytes) - added by Shital Patel 9 months ago.
Update customize-controls.css file
42157.4.diff (486 bytes) - added by subrataemfluence 9 months ago.
42157.5.diff (2.0 KB) - added by sayedwp 9 months ago.
radios-desktop.png (62.6 KB) - added by westonruter 9 months ago.
radios-mobile.png (77.1 KB) - added by westonruter 9 months ago.
checkbox-mobile.png (33.0 KB) - added by westonruter 9 months ago.
checkbox-desktop.png (25.2 KB) - added by westonruter 9 months ago.
menu-locations-desktop.png (63.5 KB) - added by westonruter 9 months ago.
menu-locations-mobile.png (72.6 KB) - added by westonruter 9 months ago.

Download all attachments as: .zip

Change History (28)

#1 @westonruter
9 months 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
9 months ago

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

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


9 months ago

#3 @subrataemfluence
9 months ago

  • Keywords has-patch added; needs-patch removed

#4 @subrataemfluence
9 months 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
9 months 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
9 months ago

Update customize-controls.css file

#6 @sayedwp
9 months 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
9 months ago

Update customize-controls.css file

#7 @subrataemfluence
9 months 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
9 months 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
9 months ago

#9 @westonruter
9 months ago

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

#10 @westonruter
9 months 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
9 months ago

Looks good to me on Firefox and Chrome 👍

Can I get some help testing Safari and IE11+?

#12 @westonruter
9 months ago

  • Keywords has-screenshots added

Safari looks good. See screenshots 👆

#13 @westonruter
9 months ago

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

#14 @westonruter
9 months 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
8 months 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.


8 months ago

#17 @SergeyBiryukov
6 months 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.