WordPress.org

Make WordPress Core

#22168 closed defect (bug) (invalid)

wp_editor height glitch in closed/collapsed meta boxes

Reported by: nenai Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: Cc:

Description

If a meta box that contains one or more wp_editor()s loads in the closed/collapsed state the height isn't calculated correctly for the contained editors.

This varies per browser, chrome and safari seem to be able to work out the height of any editors in the first meta box but any editors in other meta boxes further down the page don't render correctly; while firefox doesn't seem to render any correctly.

I've found a hackish fix if any others happen to find this and need this functionality as I did. Using jquery removing any .closed class from #postbox-container-2 > div > .postbox on $(document).ready() seems to let all editors render correctly for every browser. You can also reapply the .closed class the same way after a timeout of about one second if you want the default to be collapsed as I did.

Attachments (1)

Untitled-1.png (9.1 KB) - added by nenai 18 months ago.
An editor that failed to render correctly inside a closed/collapsed meta box

Download all attachments as: .zip

Change History (4)

nenai18 months ago

An editor that failed to render correctly inside a closed/collapsed meta box

comment:1 nacin18 months ago

Note that TinyMCE doesn't work well inside of a meta box, as it cannot be removed from the DOM without a lot of pain, and if you were to drag/move a meta box, that's exactly what would occur.

comment:3 azaozz16 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
  • Version 3.4.2 deleted

As @nacin said, it is a bad idea to add TinyMCE inside a draggable block. A workaround is to initialize it only when needed, i.e. when the metabox is opened or after drag-drop operation ends.

On init TinyMCE tries to get the height from the underlying textarea. If that textarea is hidden its height is 0 (zero) so you will need to pass an extra init settings to tell TinyMCE the height.

Note: See TracTickets for help on using tickets.