WordPress.org

Make WordPress Core

#24586 closed defect (bug) (fixed)

Headings don't fit in TinyMCE Format dropdown

Reported by: Gage Morgan Owned by: azaozz
Milestone: 3.6 Priority: normal
Severity: minor Version: 3.6
Component: TinyMCE Keywords: has-patch
Focuses: Cc:

Description

This is the second section down on the Bugs page at

http://gage.x10.mx/bugs/


Look for the exact title.

The headings don't fit and are cut off in the drop-down box for the core editor for publishing posts and pages. This is also known as the "paragraph drop-down," or the "heading select drop-down."

Picture is located on the bugs page. Also, I have moved the JetPack problem over to the Plugins Trac.

Attachments (6)

24586.patch (700 bytes) - added by azaozz 10 months ago.
24586.ru_RU.png (10.0 KB) - added by SergeyBiryukov 10 months ago.
24586.2.patch (348 bytes) - added by SergeyBiryukov 10 months ago.
24586.2.after.png (13.2 KB) - added by SergeyBiryukov 10 months ago.
24586-2.patch (1.5 KB) - added by azaozz 10 months ago.
h1-h6-menu.png (6.9 KB) - added by azaozz 10 months ago.

Download all attachments as: .zip

Change History (18)

comment:1 alexvorn210 months ago

browser, OS?
me: firefox/windows 7 - everything works great.

comment:2 SergeyBiryukov10 months ago

  • Component changed from Editor to TinyMCE
  • Keywords needs-patch added; needs-unit-tests removed
  • Milestone changed from Awaiting Review to 3.6
  • Severity changed from major to normal
  • Summary changed from 2. Headings Don’t Fit in the Drop Down Box to Headings don't fit in TinyMCE Format dropdown

I can reproduce with Twenty Thirteen: http://cl.ly/image/0Z3O3W2S0W1B.

Looks good with Twenty Twelve though: http://cl.ly/image/0p2p022w1g2O.

Also reported on the forums: http://wordpress.org/support/topic/page-heading-selection-problem-in-editor.

comment:3 Gage Morgan10 months ago

Chrome in Windows 7 + on Android. Remember, the goal is for it to work on ALL the major browsers. Safari will also show up like that because (just like Chrome) it uses WebKit. Did you take a look at the Bugs page at http://gage.x10.MX/bugs/? There's a picture on that page that shows exactly what I'm talking about.

comment:4 follow-up: azaozz10 months ago

The vertical overlapping was fixed in [24311] (@Gage Morgan perhaps clear your browser cache). The horizontal overlapping/truncating is caused by the theme setting H1 font-size at 48px and TinyMCE setting the menu width at 250px. We could overwrite that with width: auto !important however in some translations this can get really wide. For example the German translation is Überschrift 1 which makes it 358px and can cause problems on smaller screens.

The other option is to disable importing of font-size from the content when TinyMCE creates menus that have preview capabilities. Then all headings will be the same regardless of the theme's editor-style.css.

azaozz10 months ago

comment:5 Gage Morgan10 months ago

Okay, I have an idea that might take some extra work. Disable importing of font size from content unless specified in the Writing section of the WordPress settings in the Admin Dashboard. There should be some type of box you must check there before it will display.

comment:6 Gage Morgan10 months ago

It's fixed. I just updated today, and using one of the new nightly builds has been fixed. Thanks! (This issue is resolved.)

comment:7 MikeHansenMe10 months ago

  • Keywords close added; needs-patch removed

SergeyBiryukov10 months ago

SergeyBiryukov10 months ago

comment:8 in reply to: ↑ 4 ; follow-up: SergeyBiryukov10 months ago

  • Keywords has-patch added; close removed

Replying to azaozz:

The horizontal overlapping/truncating is caused by the theme setting H1 font-size at 48px and TinyMCE setting the menu width at 250px. We could overwrite that with width: auto !important however in some translations this can get really wide. For example the German translation is Überschrift 1 which makes it 358px and can cause problems on smaller screens.

Personally, I'd like to increase the width a bit, to make room for longer strings ("Заголовок 1" in Russian). We could use max-width to prevent the menu from getting too wide: 24586.2.patch.

See the screenshots: 24586.ru_RU.png, 24586.2.after.png. I don't think it would cause problems on smaller screens. If it does, I'm fine with keeping the width as is.

comment:9 alexvorn210 months ago

  • Severity changed from normal to minor

comment:10 in reply to: ↑ 8 azaozz10 months ago

Replying to SergeyBiryukov:

Personally, I'd like to increase the width a bit...

We probably can do: width: auto !important; max-width: 300px;. However I like the "normalizing" of the font size in the drop-down (24586.patch​) as it would make it 100% compatible with all themes (the H1 - H6 font size will obey the rules in editor.css).

azaozz10 months ago

azaozz10 months ago

comment:11 azaozz10 months ago

24586-2.patch​ makes the H1-H6 menu items consistent for all themes:

comment:12 azaozz10 months ago

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

In 24545:

TinyMCE: normalize font size for H1 - H6 submenu, fixes #24586.

Note: See TracTickets for help on using tickets.