Make WordPress Core

Opened 4 years ago

Closed 15 months ago

#52869 closed enhancement (worksforme)

Twenty Twenty-One: Text isn't vertically centered to the checkbox

Reported by: ooker's profile ooker Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: reporter-feedback close
Focuses: css Cc:

Description

I think we should add vertical-align: middle; into the line 1344 to have text aligning centerally vertically to the checkbox. Currently the code is like this:

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

	input[type=checkbox],
	input[type=radio] {
		-webkit-appearance: none;
		-moz-appearance: none;
		position: relative;
		width: 25px;
		height: 25px;
		border: var(--form--border-width) solid var(--form--border-color);
		background: var(--global--color-white);
	}

Change History (6)

#1 @peterwilsoncc
4 years ago

  • Component changed from Formatting to Bundled Theme
  • Keywords has-screenshots removed
  • Version changed from 5.7 to 5.6

Hi @ooker and welcome back to trac!

I notice you included the has-screenshots keyword, did you intend to attach an image to the ticket?

#2 @justinahinon
4 years ago

  • Keywords reporter-feedback added

Hello @ooker,

I can not reproduce the output on your screenshot. The checkboxes are correctly aligned for me (see screenshot https://cln.sh/VfGtXv).

Maybe there's another plugin interfering with this element style?

Can you confirm you still have the same behavior on a fresh WordPress installation with no plugin activated?

#3 @ooker
4 years ago

It turns out that only checkboxes produced by the plugin Formidable Form has this problem. But the problem is forms from that plugin can inherit styles from the theme by disable custom styling. It seems that other themes don't have this problem (or else the plugin author should have fixed it).

Anyhow, would there be any problem to add vertical-align: middle; into the line 1344? It may fixed future bugs as well.

#4 @karmatosed
15 months ago

  • Keywords close added

Like @justinahinon I also find myself unable to reproduce this. If you are only finding this reproduced in combination with a plugin @ooker that's not something to fix in the theme itself, particularly not in an older default theme in my opinion. That all said, if you can reproduce the issue without a specific plugin, please provide the steps.

As it doesn't seem to be the case this is the theme, I am going to add the close keyword as a recommendation.

#5 @karmatosed
15 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Let's close this for now as it has had some time for feedback.

Note: See TracTickets for help on using tickets.