Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#47366 closed defect (bug) (fixed)

Privacy Policy page dropdown needs a max-width

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: garrett-eclipse's profile garrett-eclipse
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, privacy Cc:

Description (last modified by SergeyBiryukov)

Previously: #19613, #19782, #21956.

If there's a page with an extra long title, the Privacy Policy page dropdown in Privacy Settings overflows the page width.

See the screenshot.

Attachments (17)

47366.png (41.8 KB) - added by SergeyBiryukov 6 years ago.
47366.diff (357 bytes) - added by mukesh27 6 years ago.
Patch.
Screen Shot 2019-05-24 at 11.40.50 AM.png (333.1 KB) - added by desrosj 6 years ago.
Screen Shot 2019-05-24 at 11.40.27 AM.png (385.8 KB) - added by desrosj 6 years ago.
Screen Shot 2019-05-24 at 11.40.20 AM.png (390.8 KB) - added by desrosj 6 years ago.
47366.2.diff (364 bytes) - added by desrosj 6 years ago.
47366.reading-settings.png (14.6 KB) - added by SergeyBiryukov 6 years ago.
47366.options-reading-max-width-100%.png (131.7 KB) - added by mukesh27 6 years ago.
Fix with max-width 100%
47366.3.diff (323 bytes) - added by adhitya03 6 years ago.
Attached patch that add max-width in .wp-admin select to resolve the issue in Privacy Settings and Reading Settings page.
47366.4.diff (357 bytes) - added by jalpa1984 6 years ago.
Forms.css changes
47366.5.diff (291 bytes) - added by adhitya03 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
2019-08-25.png (47.9 KB) - added by paresh07 5 years ago.
Screenshot-1
Screenshot-2.png (52.6 KB) - added by paresh07 5 years ago.
Screenshot-2
47366.6.diff (412 bytes) - added by garrett-eclipse 5 years ago.
Refresh to use max-width 25rem
Screen Shot 2019-09-30 at 11.49.29 PM.png (40.8 KB) - added by garrett-eclipse 5 years ago.
Privacy Policy setting w/ max-width applied
Screen Shot 2019-09-30 at 11.49.35 PM.png (86.3 KB) - added by garrett-eclipse 5 years ago.
Reading Settings w/ max-width applied
Screen Shot 2019-09-30 at 11.27.41 PM.png (457.8 KB) - added by garrett-eclipse 5 years ago.
Long options overflow viewport on specific browsers to allow for more context

Download all attachments as: .zip

Change History (39)

@SergeyBiryukov
6 years ago

#1 @SergeyBiryukov
6 years ago

  • Description modified (diff)

@mukesh27
6 years ago

Patch.

#2 @mukesh27
6 years ago

  • Keywords has-patch added; needs-patch removed

Attached patch that add max-width in select tag.

#3 @desrosj
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.

@desrosj
6 years ago

#4 @SergeyBiryukov
6 years ago

Looks like the same issue also applies to Reading Settings: 47366.reading-settings.png.

@mukesh27
6 years ago

Fix with max-width 100%

#5 @mukesh27
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 @desrosj
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

@adhitya03
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 @adhitya03
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 @adhitya03
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.

#11 @adhitya03
6 years ago

  • Keywords needs-refresh removed

@jalpa1984
6 years ago

Forms.css changes

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

@adhitya03
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: @nrqsnchz
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 @adhitya03
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.

@paresh07
5 years ago

Screenshot-1

@paresh07
5 years ago

Screenshot-2

#18 @paresh07
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.

Screenshot-1

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.

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

@garrett-eclipse
5 years ago

Refresh to use max-width 25rem

@garrett-eclipse
5 years ago

Privacy Policy setting w/ max-width applied

@garrett-eclipse
5 years ago

Reading Settings w/ max-width applied

@garrett-eclipse
5 years ago

Long options overflow viewport on specific browsers to allow for more context

#20 @garrett-eclipse
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.

This ticket was mentioned in Slack in #core-privacy by garrett-eclipse. View the logs.


5 years ago

#22 @whyisjake
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 46411:

Administration: Add a max-width to the Privacy Policy Page dropdown.

If there's a page with an extra long title, the Privacy Policy page dropdown in Privacy Settings overflows the page width.

Fixes #47366
Props garrett-eclipse, SergeyBiryukov, mukesh27, desrosj, adhitya03, jalpa1984, nrqsnchz, paresh07.

Note: See TracTickets for help on using tickets.