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: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (15)
#2
in reply to:
↑ 1
@
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
@
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.
#5
@
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
#6
@
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.
#8
@
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.
#10
@
5 years ago
- Focuses css added
- Keywords commit added
- Owner set to ianbelanger
- Status changed from new to reviewing
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/