WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

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

Download all attachments as: .zip

Change History (20)

comment:1 @nacin2 years ago

  • Milestone changed from Awaiting Review to 3.5

@DrewAPicture2 years ago

@DrewAPicture2 years ago

Adds word-wrap for Opera

comment:2 @DrewAPicture2 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

comment:3 @bradthomas1272 years ago

Also fixes IE9.

@Ov3rfly2 years ago

screenshot of 21964.1.diff

comment:4 @Ov3rfly2 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 2 years ago by Ov3rfly (previous) (diff)

comment:5 @DrewAPicture2 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.

comment:6 @lancewillett2 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.

comment:7 @lancewillett2 years ago

Menu item widths:

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

@lancewillett2 years ago

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

@lancewillett2 years ago

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

comment:8 follow-up: @lancewillett2 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.

@lancewillett2 years ago

comment:9 in reply to: ↑ 8 @DrewAPicture2 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.

comment:10 @lancewillett2 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.

comment:11 follow-up: @lancewillett2 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.

comment:12 @lancewillett2 years ago

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

comment:13 in reply to: ↑ 11 @Ov3rfly2 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.