Editor toolbar button groups don’t wrap

  • Resolved dudleyits

    (@dudleyits)


    7 years, 9 months ago

    I’m trying out the Gutenberg editor, having customized the MCE WordPress editor toolbar. Now I find that the toolbar which used to wrap the button groups to flow around the width of the editor area, now forces all the button groups to stetch out horizontally so that the overflow beyond the width of the editor area. If I deactivate the Gutenberg plugin then it goes back to normal. I’m using the latest version of Chrome to edit WordPress.

Viewing 1 replies (of 1 total)
  • Thread Starter dudleyits

    (@dudleyits)

    7 years, 9 months ago

    After looking at this in Chrome with the developer toolbar I found this is because we have created button groups in the TinyMCE editor for customising it.

    The standard Gutenberg toolbar allows buttons to wrap because it has this CSS:

    .mce-toolbar .mce-btn-group>div { white-space: normal; }

    But in our case we have created many small .mce-btn-group div’s each of which gets its CSS from the parent element which has this CSS:

    .mce-tinymce-inline .mce-flow-layout { white-space: no-wrap; }

    That no-wrap attribute means that the button groups don’t wrap within the toolbar.

Viewing 1 replies (of 1 total)

The topic ‘Editor toolbar button groups don’t wrap’ is closed to new replies.

Tags