Wagtail: hallo toolbar misplacement within StreamField in a MultiFieldPanel

[loleg]

Issue Summary

The toolbar overlaps content in the text editor when a RichTextBlock is used inside of a MultiFieldPanel.

The workaround is to wrap the RichTextBlock in a StructBlock - as per #1511 fixed in #3415 - or not to use MultiFieldPanel.

Steps to Reproduce

Set up a model as follows:

body_de = StreamField([('paragraph', RichTextBlock())])
content_panels = [
        MultiFieldPanel([
            StreamFieldPanel('body')
        ])
]

Observe the toolbar overlapping like this:

Technical details

• Python version: 3.5.3
• Django version: 1.11
• Wagtail version: 1.10
• Browser version: tested in current stable versions of IE, Firefox, Chrome

[strindhaug]

It seems to me that this fancy positioned toolbar is way to complex to be bugfree, and every fix for one position issue seems to cause other position issues in other contexts.

Would it be possible modify the toolbar so that it's not positioned, but inserted statically just above the text-area, instead? (Or if having multiple toolbars instead of one positioned one breaks the script, just reserve plenty of space above each rich-text texareas so that the toolbar is always outside the textarea)

[samuelantonioli]

Had the same problem and solved it using a hacky workaround. I'm sure that the toolbar will make some problems if we integrate the css rule I've added here in other edge cases.

I'm not suggesting you should use the following, but it solves the problem (using a not maintainable way, I admit).
Maybe we can build a proper solution based on it:

In some_app/wagtail_hooks.py:

from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html

from wagtail.wagtailcore import hooks

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<style>{}</style>',
        'body div.hallotoolbar:not(.stream-field) {min-width: 850px !important;transform: translate3d(-60px, -75px, 0px) !important;}'
    )

[thibaudcolas]

We've replaced Hallo with a new editor, which doesn't have as fancy toolbar positioning, so doesn't have this issue. Closing.