Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#49013 closed defect (bug) (fixed)

Alignment of form controls inside a custom meta box

Reported by: dontdream's profile dontdream Owned by: audrasjb's profile audrasjb
Milestone: 5.3.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit fixed-major
Focuses: ui, css Cc:

Description

This is a follow-up to #48420.

I appreciate the recent improvements to the admin CSS, and I wish to submit to your attention this use case. Even with WP 5.3.1, a misalignment is visible, at least in Chrome and Firefox.

To reproduce, use the following plugin which adds a meta box to the page edit screen.

/*
Plugin Name: A CSS test plugin
Plugin URI: https://www.dontdream.it/
Description: A CSS test plugin.
Version: 1.0
Author: Andrea Tarantini
Author URI: https://www.dontdream.it/
*/

add_action ('add_meta_boxes', 'ctp_add_meta_boxes');
function ctp_add_meta_boxes ()
{
	add_meta_box ('ctp_fields_box', 'CSS Test Plugin', 'ctp_fields_box', 'page', 'normal');
}

function ctp_fields_box ($post)
{
?>
<div>
	<div>
		<select>
			<option value="1">First</option>
			<option value="2">Second</option>
		</select>
		<input type="text" placeholder="Input 1">
		<input type="text" placeholder="Input 2">
		<select>
			<option value="1">First</option>
			<option value="2">Second</option>
		</select>
	</div>
	<div>
		<select>
			<option value="1">First</option>
			<option value="2">Second</option>
		</select>
		<input type="text" placeholder="Input 1">
		<input type="text" placeholder="Input 2">
		<select>
			<option value="1">First</option>
			<option value="2">Second</option>
		</select>
	</div>
</div>
<?php
}

Thank you!

Attachments (4)

css-test-plugin.png (11.8 KB) - added by dontdream 5 years ago.
meta box produced by the provided code
49013.diff (374 bytes) - added by audrasjb 5 years ago.
Administration: Fixes vertical-align issue on custom metabox text inputs.
Capture d’écran 2020-01-11 à 18.34.41.png (19.5 KB) - added by audrasjb 5 years ago.
Administration: Fixes vertical-align issue on custom metabox text inputs.
testing 49013 on WordPress 5.2.png (42.5 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (18)

#1 @SergeyBiryukov
5 years ago

  • Focuses ui css added
  • Keywords needs-screenshots added
  • Version set to 5.3.1

Hi there, welcome to WordPress Trac! Thanks for the ticket.

Could you add a screenshot to illustrate the issue?

Last edited 5 years ago by SergeyBiryukov (previous) (diff)

@dontdream
5 years ago

meta box produced by the provided code

#2 @dontdream
5 years ago

  • Keywords has-screenshots added; needs-screenshots removed

The uploaded image shows the misalignment between select and input controls. As previously mentioned, this test meta box is added to the page edit screen by the provided code.

#3 @audrasjb
5 years ago

  • Milestone changed from Awaiting Review to 5.3.3
  • Owner set to audrasjb
  • Status changed from new to accepted
  • Type changed from enhancement to defect (bug)

@audrasjb
5 years ago

Administration: Fixes vertical-align issue on custom metabox text inputs.

@audrasjb
5 years ago

Administration: Fixes vertical-align issue on custom metabox text inputs.

#4 @audrasjb
5 years ago

  • Keywords has-patch added

Pinging @afercia: as you handled the last fixes in vertical-align issues, could you please review the above patch?
Thanks 😉

#5 @dontdream
5 years ago

I've now tested the patch, and it works fine for me too. Thank you!

#6 @audrasjb
5 years ago

  • Milestone changed from 5.3.3 to 5.4

Moving all unfixed tickets from 5.3.3 to milestone 5.4, as there is no plan for a 5.3.3 maintenance release for now.

#7 @audrasjb
5 years ago

  • Keywords commit added

This patch looks read to ship.
Adding commit keyword.

#8 @valentinbora
5 years ago

Confirmed patch applies and fixes the issue. Ready to go.

#9 @SergeyBiryukov
5 years ago

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

In 47289:

Administration: Correct alignment of form controls inside custom meta boxes.

Props audrasjb, dontdream, valentinbora.
Fixes #49013.

#10 @SergeyBiryukov
5 years ago

  • Keywords fixed-major added
  • Milestone changed from 5.4 to 5.3.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Since this appears to be a regression in 5.3, let's merge this to the 5.3 branch.

#11 @SergeyBiryukov
5 years ago

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

In 47290:

Administration: Correct alignment of form controls inside custom meta boxes.

Props audrasjb, dontdream, valentinbora.
Merges [47289] to the 5.3 branch.
Fixes #49013.

#12 follow-up: @afercia
5 years ago

Related: https://core.trac.wordpress.org/ticket/48420#comment:20

Vertical alignments never worked very well in the WordPress admin. See the screenshot below, with the test plugin from this ticket activated on WordPress 5.2. See the misalignments are unrelated to the CSS changes in 5.3. Not a regression but good to improve it anyways :)

However, as mentioned on ticket:48420#comment:20 vertical alignments would need to be improved across the whole admin. There are a few options for that. Using vertical-align: middle is one option but it will fail as soon as one of the elements or associated labels has top/bottom margins. Looking forward to a second round of admin CSS improvements :)

#13 @afercia
5 years ago

  • Version 5.3.1 deleted

#14 in reply to: ↑ 12 @SergeyBiryukov
5 years ago

Replying to afercia:

Vertical alignments never worked very well in the WordPress admin. See the screenshot below, with the test plugin from this ticket activated on WordPress 5.2. See the misalignments are unrelated to the CSS changes in 5.3. Not a regression but good to improve it anyways :)

Thanks for the clarification :)

Note: See TracTickets for help on using tickets.