WordPress.org

Make WordPress Core

Opened 8 days ago

Last modified 32 hours ago

#48269 new defect (bug)

WordPress beta 5.3 - Customizer - Height of input and select are not same.

Reported by: veminom Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Customize Keywords: reporter-feedback
Focuses: ui Cc:
PR Number:

Description

After testing WordPress 5.3 Beta I found that the height of the input and select in the customizer is not equal. It looks like in beta version we have added increased the min-height of the input from 28px to 30px.

Please see the screenshot below:
https://cl.ly/e82bc0c16da1

And the height of the select is still the same 28px.

Please see the screenshot below:
https://cl.ly/c441e5c20883

I think we should have a similar height for both the select and input fields. ( either 30px or 28px )

Change History (2)

#1 follow-up: @dlh
7 days ago

  • Component changed from General to Customize
  • Keywords reporter-feedback added; needs-patch removed
  • Severity changed from major to normal
  • Version trunk deleted

Hi @veminom, and welcome to WordPress Trac!

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

So, I'm not sure I see a regression. Separately, what would be the reasons for making them the same?

#2 in reply to: ↑ 1 @veminom
32 hours ago

Hello @dlh,

Thank you for your response.

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

  • I'm sorry for not describing it properly. The issue seems to be with the input field type number.

When I checked the input field type number, the below is the CSS I found for the input field type number:

WordPress 5.2:

Input ( type - number ) - 

http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

.customize-control input[type="text"],
.customize-control input[type="password"],
.customize-control input[type="email"],
.customize-control input[type="number"],
.customize-control input[type="search"],
.customize-control input[type="tel"],
.customize-control input[type="url"] {
	width: 100%;
	line-height: 1.3;
	margin: 0;
}

http://localhost/wp-new/wp-admin/css/forms.css?ver=5.2.4

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: 1;
}

In the above CSS, the height of 28px is applying to the input type number.

There seems to be no default WP theme with number field in it so I opened the Elements(HTML) editor of the page and renamed input type to number from text.

Please see the screenshot below:
https://cl.ly/49943d87bb60

Now, for field select in WordPress 5.2 there is height: 28px;.

WordPress 5.2:

Select -

http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

.customize-control select {
    width: 100%;
    height: 28px;
    line-height: 2;
}

Please see the screenshot below:
https://cl.ly/38c1c0dbd7a6

So it looks like the height for both Input type number and Select is same that is 28px in WordPress 5.2.

# Now, coming to WordPress 5.3

Same input type field number CSS:

WordPress 5.3:

Input ( type - number ) -

http://localhost/wp-beta-test/wp-admin/css/forms.css?ver=5.3-RC1-46558

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
	padding: 0 8px;
	/* inherits font size 14px */
	line-height: 2; /* 28px */
	/* Only necessary for IE11 */
	min-height: 30px;
}

Here the min-height of 30px is applied to the input field type number.

Please see the screenshot below:
https://cl.ly/d9a77327d738

And for select field the below CSS is getting applied:

WordPress 5.3:

Select -

http://localhost/wp-beta-test/wp-admin/css/customize-controls.css?ver=5.3-RC1-46558

.customize-control select {
    width: 100%;
    height: 28px;
    line-height: 2;
}

Please see the screenshot below:
https://cl.ly/f753bab78a23

Here the height is applied to the select field of 28px due to which the height of Input type number is 2 pixels more than that of Select field.


In my opinion, both the heights should be the same.

what would be the reasons for making them the same?

  • We should keep all the fields height the same as they were before. This new change of min-height 30 to input type number field is creating some UI issues because some of the themes use Input type number field with Select field in the same line which creates the height problem.

For example, please check the Astra:

Customizer -> Global -> Typography -> Headings ->

Please see the screenshot below:
https://cl.ly/bf53dece088f

In the above screenshot you can see that the height for input type number and select is different in WP 5.3 beta version while it is equal in WP 5.2 version

Please let me know your thoughts.

Thank you!

Replying to dlh:

Hi @veminom, and welcome to WordPress Trac!

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

So, I'm not sure I see a regression. Separately, what would be the reasons for making them the same?

Note: See TracTickets for help on using tickets.