Text alignment in options-discussion.php

[Ankit K Gupta]

Labels are not aligned same as other labels.Having different margin due to <p> tag.
Attached patch file. I am beginner in CSS, may be this style need improvement.

[Ankit K Gupta]

Screenshot Before Fix

[Ankit K Gupta]

Screenshot After Fix

[Ankit K Gupta]

added patch

[karmatosed]

I think it would be great to get the alignment sorted, but I do wonder if this could be a CSS solution and keep the p tags for consistency. Have you explored that @Ankit K Gupta?

[FolioVision]

@Ankit, great that you opened up this ticket. The poor alignment in WordPress preferences drive me batty.

In some ways, it would be easier to remove the p tags as you recommend. Here's what our discovery found: sometimes things in right column are wrapped in p tags, but sometimes not (in Options -> Discussion the top ones). P tags as well as Label tags have their own margins, which add up. Plus, TH and TD don't have the same paddings, as well as TDs and P tags don't have the same line height. If you count this together, it's a mess.

In line with @karmatosed's recommendation, we keep the p tag, I did some work on making preferences line up. In this case, every element is wrapped in P. For the moment it doesn't work with default WordPress admin but does work starting with a clean slate. I'm attaching an HTML example of clean WordPress preferences with each the content in each td wrapped in P.

.form-table cells include all different elements and tags. Right now many of them don't even share the same margins or paddings (like TH and TD). Every try to unify the tags one by one resulted in more work.

So we looked at what kind of scenarios happen inside table cells. In the end we found out, that the alignment improved by slightly changing the top margin on the Label tag. Then we added one extra declaration if a Label is placed inside a P tag and all of the cells aligned nicely. One more element changes regular paragraph text line heights on a regular basis - small select fields. If they are in first line of the text, it's breaking the alignment. Negative margin was added.

The big decision now is whether we should include P tags to wrap content in each TD or whether it would be better to only include P tags where absolutely required (no wrapping element). After this decision it will be hard slogging to clean up the WP Admin CSS to make the TD content align in all possible cases. There will need to be a lot of small changes (hopefully more removing properties than adding them).

[FolioVision]

Sample: how alignment in options currently looks

[FolioVision]

How alignment looks after simplification, including wrapping TD content in P

[FolioVision]

Sample simpler, cleaner options WP Admin code

[FolioVision]

After a second though I believe there is no need to start wrapping everything in P tags. Sometimes even regular paragraph text contains form field, that will further change line heights and alignment. So instead of putting everything in P, I propose a small change in forms.css. It aligns Label tag no matter if is wrapped in P or not, plus adds a fix for small select fields changing spacing when placed in P.

Diff included above

[Ankit K Gupta]

@karmatosed yep, Keeping p make sense to me. Nice suggestion. Thanks :)
@FolioVision Thanks for updating the patch and efforts, It looks fine on options-discussion.php page but it's creating little margin issue on options-media.php.
Please refer attached screenshots.
When we are using

margin-top: -4px;

on input.small-text class, it looks little miss-aligned

[Ankit K Gupta]

Screenshot without margin

[Ankit K Gupta]

Screenshot After margin

[FolioVision]

@Ankit K Gupta thanks for the testing, then we need to specify which scenario we want to tackle with that negative margin. I've updated my patch to work only if the input is inside a label tag.

[FolioVision]

Targeting only select fields, that are inside label tags

[desrosj]

with all of the admin styling adjustments in ​5.3 and ​5.3.1, it's likely that some of these issues may have been fixed.

Is anyone able to take some updated screenshots to demonstrate that these issues are still occurring?

[Ankit K Gupta]

Replying to desrosj:

with all of the admin styling adjustments in ​5.3 and ​5.3.1, it's likely that some of these issues may have been fixed.

Is anyone able to take some updated screenshots to demonstrate that these issues are still occurring?

Hello @desrosj

It looks little better but not fully aligned.
Please check attached screenshot.

Thanks!

[Ankit K Gupta]

wp-admin

[valentinbora]

This is still an issue on 5.4-beta1

[samful]

what was the reason @FolioVision 's https://core.trac.wordpress.org/attachment/ticket/37384/37384-2.diff wasn't used as the solution here? It seems to solve the issue for me. Did you try it @ankit-k-gupta ?

Screenshots below

[whyisjake]

Confirmed, still an issue in 5.5.

[whyisjake]

In 48419:

Administration: Better align labels on the discussion options page.

The labels for Comment Moderation, and Comment Blocklist are now aligned properly with the adjacent text.

Fixes #37384.
Props ankit-k-gupta, karmatosed, FolioVision, desrosj, valentinbora, samful, whyisjake.