Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#21964 closed defect (bug) (fixed)

Twenty Twelve: Submenu not wide enough for longer words

Reported by: ov3rfly's profile 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 12 years ago.
21964.diff (536 bytes) - added by DrewAPicture 12 years ago.
21964.1.diff (562 bytes) - added by DrewAPicture 12 years ago.
Adds word-wrap for Opera
twenty-twelve-submenu-bug-2.jpg (32.4 KB) - added by Ov3rfly 12 years ago.
screenshot of 21964.1.diff
twenty-ten-nowrap.png (402.4 KB) - added by lancewillett 12 years ago.
Example of Twenty Ten with a long word that does not wrap
twenty-eleven-nowrap.png (91.8 KB) - added by lancewillett 12 years ago.
Example of Twenty Eleven with a long word that does not wrap
21964.2.diff (506 bytes) - added by lancewillett 12 years ago.

Download all attachments as: .zip

Change History (20)

#1 @nacin
12 years ago

  • Milestone changed from Awaiting Review to 3.5

@DrewAPicture
12 years ago

@DrewAPicture
12 years ago

Adds word-wrap for Opera

#2 @DrewAPicture
12 years 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

#3 @bradthomas127
12 years ago

Also fixes IE9.

@Ov3rfly
12 years ago

screenshot of 21964.1.diff

#4 @Ov3rfly
12 years 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 12 years ago by Ov3rfly (previous) (diff)

#5 @DrewAPicture
12 years 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.

#6 @lancewillett
12 years 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.

#7 @lancewillett
12 years ago

Menu item widths:

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

@lancewillett
12 years ago

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

@lancewillett
12 years ago

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

#8 follow-up: @lancewillett
12 years 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.

#9 in reply to: ↑ 8 @DrewAPicture
12 years 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.

#10 @lancewillett
12 years 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.

#11 follow-up: @lancewillett
12 years 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.

#12 @lancewillett
12 years ago

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

#13 in reply to: ↑ 11 @Ov3rfly
12 years 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.