Make WordPress Core

Opened 8 years ago

Closed 5 years ago

#37926 closed defect (bug) (fixed)

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

Reported by: gma992's profile gma992 Owned by: ianbelanger's profile ianbelanger
Milestone: 5.4.2 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-screenshots has-patch commit fixed-major
Focuses: css 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 8 years ago.
37926.diff
37926.1.diff (889 bytes) - added by ianbelanger 6 years ago.
Updates patch with more wide ranging selector

Download all attachments as: .zip

Change History (15)

#1 follow-up: @karmatosed
8 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
8 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
8 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
8 years ago

  • Milestone changed from Awaiting Review to Future Release

#5 @gma992
8 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
8 years ago

37926.diff

@ianbelanger
6 years ago

Updates patch with more wide ranging selector

#6 @ianbelanger
6 years 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
6 years ago

  • Milestone changed from Future Release to 5.3

#8 @davidbaumwald
5 years ago

  • Milestone changed from 5.3 to Future Release

This ticket still needs some work and testing. With Beta 1 of version 5.3 only a few days away, this is being moved to Future Release. If this ticket can be resolved in time for 5.3, feel free to re-milestone.

#9 @ianbelanger
5 years ago

  • Milestone changed from Future Release to 5.5

#10 @ianbelanger
5 years ago

  • Focuses css added
  • Keywords commit added
  • Owner set to ianbelanger
  • Status changed from new to reviewing

#11 @ianbelanger
5 years ago

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

In 47801:

Bundled Themes: Twenty Eleven & Twenty Twelve dropdown category widget exceeds parent div when strings are long enough.

Fixes the width of the category dropdown by limiting the width of select items in widgets using max-width: 100%.

Props gma992, karmatosed.
Fixes #37926.

#12 @ianbelanger
5 years ago

  • Keywords fixed-major added
  • Milestone changed from 5.5 to 5.4.2
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#13 @whyisjake
5 years ago

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

In 47803:

Bundled Themes: Twenty Eleven & Twenty Twelve dropdown category widget exceeds parent div when strings are long enough.

Fixes the width of the category dropdown by limiting the width of select items in widgets using max-width: 100%.

Backporting this change to the 5.4 branch.

Props gma992, karmatosed, ianbelanger.
Fixes #37926.

Note: See TracTickets for help on using tickets.