WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 2 days ago

#49013 accepted defect (bug)

Alignment of form controls inside a custom meta box

Reported by: dontdream Owned by: audrasjb
Milestone: 5.3.3 Priority: normal
Severity: normal Version: 5.3.1
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, css Cc:
PR Number:

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 (3)

css-test-plugin.png (11.8 KB) - added by dontdream 5 weeks ago.
meta box produced by the provided code
49013.diff (374 bytes) - added by audrasjb 10 days 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 10 days ago.
Administration: Fixes vertical-align issue on custom metabox text inputs.

Download all attachments as: .zip

Change History (8)

#1 @SergeyBiryukov
5 weeks 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 weeks ago by SergeyBiryukov (previous) (diff)

@dontdream
5 weeks ago

meta box produced by the provided code

#2 @dontdream
5 weeks 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
10 days 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
10 days ago

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

@audrasjb
10 days ago

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

#4 @audrasjb
10 days 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
2 days ago

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

Note: See TracTickets for help on using tickets.