Headings don't fit in TinyMCE Format dropdown

[Gage Morgan]

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.

[alexvorn2]

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

[SergeyBiryukov]

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.

[Gage Morgan]

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.

[azaozz]

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.

[Gage Morgan]

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.

[Gage Morgan]

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

[SergeyBiryukov]

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.

[azaozz]

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).

[azaozz]

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

[azaozz]

In 24545:

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