Opened 8 years ago
Closed 4 years ago
#37384 closed defect (bug) (fixed)
Text alignment in options-discussion.php
Reported by: | Ankit K Gupta | Owned by: | whyisjake |
---|---|---|---|
Milestone: | 5.5 | Priority: | low |
Severity: | minor | Version: | 4.5.3 |
Component: | Administration | Keywords: | 2nd-opinion needs-testing has-patch |
Focuses: | ui, css, administration | Cc: |
Description
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.
Attachments (16)
Change History (33)
#3
@
8 years ago
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?
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
8 years ago
#5
@
8 years ago
@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.
https://core.trac.wordpress.org/attachment/ticket/37384/options-discussion-alignment.html
.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).
#6
@
8 years ago
- Keywords needs-testing added
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
#7
@
8 years ago
@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
#9
@
8 years ago
@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.
This ticket was mentioned in Slack in #design by foliovision. View the logs.
8 years ago
#13
in reply to:
↑ 12
@
5 years ago
- Keywords needs-screenshots removed
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!
#14
@
5 years ago
- Milestone changed from Awaiting Review to 5.5
- Priority changed from normal to low
- Severity changed from normal to minor
#15
@
5 years ago
- Focuses css added
- Keywords needs-testing has-patch added; needs-refresh removed
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
Screenshot Before Fix