WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 weeks ago

#47366 new defect (bug)

Privacy Policy page dropdown needs a max-width

Reported by: SergeyBiryukov Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Privacy Keywords: good-first-bug has-screenshots has-patch
Focuses: ui, administration 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 (13)

47366.png (41.8 KB) - added by SergeyBiryukov 4 months ago.
47366.diff (357 bytes) - added by mukesh27 4 months ago.
Patch.
Screen Shot 2019-05-24 at 11.40.50 AM.png (333.1 KB) - added by desrosj 4 months ago.
Screen Shot 2019-05-24 at 11.40.27 AM.png (385.8 KB) - added by desrosj 4 months ago.
Screen Shot 2019-05-24 at 11.40.20 AM.png (390.8 KB) - added by desrosj 4 months ago.
47366.2.diff (364 bytes) - added by desrosj 4 months ago.
47366.reading-settings.png (14.6 KB) - added by SergeyBiryukov 4 months ago.
47366.options-reading-max-width-100%.png (131.7 KB) - added by mukesh27 4 months ago.
Fix with max-width 100%
47366.3.diff (323 bytes) - added by adhitya03 2 months 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 2 months ago.
Forms.css changes
47366.5.diff (291 bytes) - added by adhitya03 2 months 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 3 weeks ago.
Screenshot-1
Screenshot-2.png (52.6 KB) - added by paresh07 3 weeks ago.
Screenshot-2

Download all attachments as: .zip

Change History (31)

@SergeyBiryukov
4 months ago

#1 @SergeyBiryukov
4 months ago

  • Description modified (diff)

@mukesh27
4 months ago

Patch.

#2 @mukesh27
4 months ago

  • Keywords has-patch added; needs-patch removed

Attached patch that add max-width in select tag.

#3 @desrosj
4 months 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
4 months ago

#4 @SergeyBiryukov
4 months ago

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

@mukesh27
4 months ago

Fix with max-width 100%

#5 @mukesh27
4 months 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.


3 months ago

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


3 months ago

@adhitya03
2 months ago

Attached patch that add max-width in .wp-admin select to resolve the issue in Privacy Settings and Reading Settings page.

#9 @adhitya03
2 months 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
2 months 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
2 months ago

  • Keywords needs-refresh removed

@jalpa1984
2 months ago

Forms.css changes

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 months ago

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


2 months ago

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


4 weeks ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 weeks ago

#16 follow-up: @nrqsnchz
4 weeks 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
4 weeks 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
3 weeks ago

Screenshot-1

@paresh07
3 weeks ago

Screenshot-2

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

Note: See TracTickets for help on using tickets.