WordPress.org

Make WordPress Core

Opened 19 months ago

Closed 19 months ago

Last modified 19 months ago

#21964 closed defect (bug) (fixed)

Twenty Twelve: Submenu not wide enough for longer words

Reported by: Ov3rfly Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.2
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

Twenty Twelve submenu items not wide enough for longer words, see attached screenshot.

Affects both Firefox 15 and Chrome 21.

Theme version: 0.9 downloaded today from githib

Attachments (7)

twenty-twelve-submenu-bug.jpg (24.8 KB) - added by Ov3rfly 19 months ago.
21964.diff (536 bytes) - added by DrewAPicture 19 months ago.
21964.1.diff (562 bytes) - added by DrewAPicture 19 months ago.
Adds word-wrap for Opera
twenty-twelve-submenu-bug-2.jpg (32.4 KB) - added by Ov3rfly 19 months ago.
screenshot of 21964.1.diff
twenty-ten-nowrap.png (402.4 KB) - added by lancewillett 19 months ago.
Example of Twenty Ten with a long word that does not wrap
twenty-eleven-nowrap.png (91.8 KB) - added by lancewillett 19 months ago.
Example of Twenty Eleven with a long word that does not wrap
21964.2.diff (506 bytes) - added by lancewillett 19 months ago.

Download all attachments as: .zip

Change History (20)

comment:1 nacin19 months ago

  • Milestone changed from Awaiting Review to 3.5

DrewAPicture19 months ago

DrewAPicture19 months ago

Adds word-wrap for Opera

comment:2 DrewAPicture19 months ago

  • Keywords has-patch added

Good catch!

21964.1.diff fixes for me in FF, Safari, Chrome and Opera.

Related: #21503 - Twenty Twelve: Long words still getting hidden in overflow in widgets

comment:3 bradthomas12719 months ago

Also fixes IE9.

Ov3rfly19 months ago

screenshot of 21964.1.diff

comment:4 Ov3rfly19 months ago

Thanks for the patch. But since it breaks the long word "right in the middle", I would not recommend to use this as a final solution.

"Nutzungsbedingungen" is one word, now it looks like two words "Nutzun gsbedingungen", see screenshot. Same for the other "broken" words there.

Expected better behaviour: Submenu gets wider if longer words are there.

Edit: Submenu width should be increased by default, longer menu text (with more words) should word wrap within this width, very long single words should overflow but not be broken into senseless parts.

Last edited 19 months ago by Ov3rfly (previous) (diff)

comment:5 DrewAPicture19 months ago

  • Cc xoodrew@… added

The width could be increased but eventually the words will have to wrap because at a certain point you start dealing with overflow issues with sub menus and sub-sub menus on the right edge. We also add word-wrap and hyphen properties to try and break words gracefully but not all browsers treat widths the same, nor do they even support hyphens all the time with differences even from version to version.

Let's see what @lancewillett says about it.

comment:6 lancewillett19 months ago

I'd vote this to be handled by child themes CSS if there is a specific site where the menu items don't fit.

The base CSS in the theme handles the 80% of cases, which is what it's designed to do. We can't make it work for 100% of all cases without code bloat.

That said, if we need to bump up the width a bit I'm open to suggestions -- we can look at what Twenty Eleven and Twenty Ten have for menu widths.

comment:7 lancewillett19 months ago

Menu item widths:

  • Twenty Twelve is 120 pixels wide
  • Twenty Eleven is 188 pixels wide
  • Twenty Ten is 180 pixels wide

lancewillett19 months ago

Example of Twenty Ten with a long word that does not wrap

lancewillett19 months ago

Example of Twenty Eleven with a long word that does not wrap

comment:8 follow-up: lancewillett19 months ago

My proposed solution is to make the menu items wider to match Ten and Eleven, but no implement the wrapping since neither of those themes did so.

lancewillett19 months ago

comment:9 in reply to: ↑ 8 DrewAPicture19 months ago

Replying to lancewillett:

My proposed solution is to make the menu items wider to match Ten and Eleven, but no implement the wrapping since neither of those themes did so.

Works for me. Not like a child theme couldn't just add the wrap in later or even increase the width even more.

+1 for 21964.2.diff.

comment:10 lancewillett19 months ago

In [21991]:

Twenty Twelve: make submenu a bit wider to support longer words in menu item link text. Matches Twenty Ten and Eleven. See #21964.

comment:11 follow-up: lancewillett19 months ago

@Ov3rfly Can you test again after this change? Let me know what you find. If you have time and the inclination, testing with Twenty Ten and Twenty Eleven would be great, too -- and compare the results.

comment:12 lancewillett19 months ago

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

comment:13 in reply to: ↑ 11 Ov3rfly19 months ago

Replying to lancewillett:

@Ov3rfly Can you test again after this change? Let me know what you find.

Changeset 21991 looks like a perfect solution for me. Thanks.

Note: See TracTickets for help on using tickets.