Opened 6 years ago
Closed 5 years ago
#47366 closed defect (bug) (fixed)
Privacy Policy page dropdown needs a max-width
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.3 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | has-screenshots has-patch commit |
Focuses: | ui, privacy | Cc: |
Description (last modified by )
Attachments (17)
Change History (39)
#2
@
6 years ago
- Keywords has-patch added; needs-patch removed
Attached patch that add max-width in select tag.
#3
@
6 years ago
- Keywords needs-design-feedback added
47366.2.diff uses 100%
instead, which allows the <select>
to fill the width of the screen on smaller orientations.
I am tagging as needs-design-feedback
because on medium screens, the dropdown and button do not align with other elements on the page and the button is butting against the dropdown.
#4
@
6 years ago
Looks like the same issue also applies to Reading Settings: 47366.reading-settings.png.
#5
@
6 years ago
If we use max-width: 100%;
here then it will not resolve our issue. check 47366.options-reading-max-width-100%.png attached screenshot.
This ticket was mentioned in Slack in #core by desrosj. View the logs.
6 years ago
#7
@
6 years ago
- Keywords needs-refresh added
47366.2.diff only targets the privacy policy tools page. The patch needs to be refreshed to include a more general fix that will help with 47366.reading-settings.png.
This ticket was mentioned in Slack in #core-privacy by postphotos. View the logs.
6 years ago
@
6 years ago
Attached patch that add max-width in .wp-admin select to resolve the issue in Privacy Settings and Reading Settings page.
#9
@
6 years ago
use max-width: 15rem because I see select
on the user profile's page, they use 15rem for the width. So the select
width will be consistent with other pages.
#10
@
6 years ago
Oh, I forgot to mention that the patch also work for choosing Default Post Category and Default Mail Category in Writing Settings Page if they have a very very long category.
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
6 years ago
This ticket was mentioned in Slack in #core-privacy by garrett-eclipse. View the logs.
6 years ago
@
6 years ago
Set all select tag in Settings page to max width 25rem, same width with input tag in Settings page, do not need "!important" rule
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
5 years ago
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
5 years ago
#16
follow-up:
↓ 17
@
5 years ago
- Keywords needs-design-feedback removed
Discussed today during the design team's weekly core triage meeting. We agreed that setting a max-width that is consistent with other select elements on other pages makes sense.
#17
in reply to:
↑ 16
@
5 years ago
Replying to nrqsnchz:
Discussed today during the design team's weekly core triage meeting. We agreed that setting a max-width that is consistent with other select elements on other pages makes sense.
So, I think patch 47366.3.diff is appropriate, It uses 15rem for max-width, same with other pages that have max-width rule like "Display name publicly as : select
" in user profile's page. And it also resolve the same issue(very long option) in Default Post Category and Default Mail Category in Writing Settings Page.
#18
@
5 years ago
Issue with the current approach:
With the CSS we can only handle the width of the select box but we can not change the width of select option dropdown list. So in case of a large page title, we can adjust the width of the select box but its width will not match with the dropdown options list. See screenshot 1 in the attachments.
Suggestion:
Show the page title up to some characters in the select option & we can display the full title on hover using the "title" attribute of HTML. Se the screenshot 2.
Example:
<option title="This is a sample page with very very long title" value="1234">This is a sample page...</option>
This ticket was mentioned in Slack in #core by desrosj. View the logs.
5 years ago
#20
@
5 years ago
- Component changed from Privacy to Administration
- Focuses privacy added; administration removed
- Keywords commit added; good-first-bug removed
- Owner set to garrett-eclipse
- Status changed from new to accepted
Thanks @SergeyBiryukov / @mukesh27 / @desrosj / @adhitya03 / @jalpa1984 for the patches they were very helpful in reproducing and analyzing the options here.
I've refreshed @adhitya03 patch to apply against trunk with 47366.6.diff, I agree we should be 'consistent with other pages'.
Testing with the patches the max-width: 25rem;
conformed with other inputs across browsers and screensizes as well it never allowed the content to overflow the page.
@paresh07 while I appreciate the feedback I feel there's no need to truncate the actual option contents as that would interfere with screenreaders as well on Chrome and other browsers the options will never overflow the screen, but if you are on desktop it will overflow the viewport outside of your browser to allow users to read the full title/contents. I've illustrated that here - screenshot
Testing across browsers and through the multiple admin screens, this addresses the issues on Privacy and Reading Settings without causing reversion in other areas.
@SergeyBiryukov / @desrosj this is ready for a final committers review.
Patch.