WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 4 weeks ago

#37926 new defect (bug)

Twenty Eleven & Twenty Twelve: Dropdown category widget exceeds parent div when strings are long enough

Reported by: gma992 Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-screenshots has-patch
Focuses: Cc:

Description

On Twenty-Eleven and Twenty-Twelve, the drop down menu at the Category Widget exceeds the size of the main body of the website and overlaps with other widgets at the footer.

Image Twenty-Eleven: ​https://cloudup.com/ca0bAvmzqz4
Image Twenty-Twelve: https://cloudup.com/cnK1axsIQ9a
Footer overlap: https://cloudup.com/cecneIc8O3b

How to replicate:

Activate Twenty eleven
Go to Categories > new
Add a category with > 30 characters
Create a post or edit existing one and assign the category
Go to Appearance > Widgets > Categories widget > check "Display as dropdown" checkbox

Proposed fix: (Fixed the main issue but not tested properly for all cases)

#cat {

max-width:100%;

}

Attachments (2)

37926.diff (754 bytes) - added by gma992 2 years ago.
37926.diff
37926.1.diff (889 bytes) - added by ianbelanger 4 weeks ago.
Updates patch with more wide ranging selector

Download all attachments as: .zip

Change History (9)

#1 follow-up: @karmatosed
3 years ago

  • Keywords needs-patch needs-screenshots needs-testing added

Hi @gma992 and thanks for this ticket. This certainly is an issue, but I'm not sure your suggested solution will work in all browsers and devices. Could you do some testing to show some screenshots of different browsers and devices, using your idea?

If you are able to, it would be great to have a patch also. You can find out more about creating a patch here: https://make.wordpress.org/core/handbook/tutorials/trac/submitting-a-patch/

#2 in reply to: ↑ 1 @gma992
3 years ago

Replying to karmatosed:

Hi @gma992 and thanks for this ticket. This certainly is an issue, but I'm not sure your suggested solution will work in all browsers and devices. Could you do some testing to show some screenshots of different browsers and devices, using your idea?

@karmatosed Sure thing, I expect to have a patch by the end of the week ;)

#3 @karmatosed
3 years ago

@gma992 how are you looking for a patch for this? I'd love to see your patch, if not just let me know on this ticket and we can explore one for this.

#4 @karmatosed
3 years ago

  • Milestone changed from Awaiting Review to Future Release

#5 @gma992
2 years ago

@karmatosed I completely forgot about this, sorry for that. Attached 37926.diff for both themes. Looks like adding the previous line is enough for all devices.

.widget #cat { max-width:100%;} 

However I cannot find a proper way to select the dropdown once it has been clicked, example images on mobile device:

Now with long categories (fits the size): https://cloudup.com/cW4TzU27EiQ
Once we click to select the long categories (does not fit the size): https://cloudup.com/cv9CbzOLPVM

@gma992
2 years ago

37926.diff

@ianbelanger
4 weeks ago

Updates patch with more wide ranging selector

#6 @ianbelanger
4 weeks ago

  • Keywords has-patch added; needs-patch needs-testing removed
  • Version 4.6 deleted

While the previous patch does still apply and fix the issue. I thought that we should target all select items in the widget areas, not just the #cat selector. Just in case a plugin or theme adds a select to a widget area.

#7 @ianbelanger
4 weeks ago

  • Milestone changed from Future Release to 5.3
Note: See TracTickets for help on using tickets.