Opened 5 years ago
Last modified 2 years ago
#48928 new enhancement
Align selects in .form-table's within admin settings with their neighbour inputs for a more uniform feel
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | has-screenshots needs-design-feedback |
Focuses: | ui, css | Cc: |
Description
Hello,
Reviewing the admin settings on several screens I feel they can be given a more uniform appearance if the selects matched the width of their neighbour .regular-text inputs. See attached screens.
Having these select a uniform width with the inputs provides a more consistent alignment.
Thoughts?
Thanks
Attachments (5)
Change History (20)
@
5 years ago
The Default Mail Category select not aligning with it's neighbour inputs in the Writing Settings
#2
follow-up:
↓ 3
@
5 years ago
Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.
#3
in reply to:
↑ 2
@
5 years ago
Replying to afercia:
Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.
Agreed, this width inconsistency has been present for quite some time I believe even pre-5.0 if I recall correctly.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#5
@
5 years ago
- Focuses administration removed
- Keywords needs-design-feedback added
This ticket was discussed during today's accessibility bug-scrub. We're not sure this is an accessibility issue. Instead, it was pointed out that in a form where elements are stacked vertically, the smaller width of the selects help to distinguish them. There was general consensus that this appears to be more a design / UI issue though.
#6
@
5 years ago
Thanks @afercia for the review. I think I was mainly flagging for accessibility as the select inputs change width depending on their contents which leads them to present differently depending and as such won't have a standard ending point so users with limited visibility whose cursor is in the right of the screen are better off going to the far left of the select as that will always be consistent where for the inputs they can go to the right side of it as they are consistent which means further to move the mouse.
Will leave for design feedback here and see if we can improve the aesthetic here through uniform conformity.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#8
@
5 years ago
- Focuses accessibility removed
This ticket was discussed during today's accessibility bug-scrub: agreed to remove the accessibility focus as it doesn't appear to be an accessibility related issue.
This ticket was mentioned in Slack in #design by chaion07. View the logs.
4 years ago
@
4 years ago
Widening the Display name publicly as drop down. To show what it would look like having the same width as the text fields surrounding it.
@
4 years ago
Widening the "Default Mail Category" drop down. To show what it would look like having the same width as the text fields above it.
#11
@
4 years ago
Design-wise, I think it's better to have variation than have them all the same.
Does the width apply the same on mobile?
#12
@
4 years ago
On one side we can say it creates consistency with having them the same width.
On the other side as you are saying Joy it creates variation. The drop downs stand out because of the difference in width. I have not checked mobile.
The shorter display name select doesn't align nicely with it's neighbour fields. On Profile.