mendixlabs / rich-text

MOVED to:
https://github.com/mendix/widgets-resources/tree/master/packages-web/rich-text
Apache License 2.0
2 stars 8 forks source link

Popup dialogs are shown out of container. #10

Open BvanderLinden opened 6 years ago

BvanderLinden commented 6 years ago

Hi,

One of our customers has informed us of a bug in the RichText Appstore module/addin.

The problem is that when you select text that is aligned to the left (against the left border of the editor container) and press the "hyperlink" button in the editor's menu, the popup dialog is partially shown outside of the container. See the attached files for examples.

Since this module has "Platform support" we are registering it as an incident and you can resolve it in a future release.

I was able to reproduce this behavior easily in a blank project by just adding the RT editor to a popup page. See ticket 60881. richtext editor

Thanks, Bas van der Linden

Andries-Smit commented 6 years ago

Dear Bas,

Thank you for reporting this issue. We will look into this.

Cheers, Andries

Andries-Smit commented 6 years ago

For now you can solve this issue with some CSS for all popups.

.modal-content.mx-window-content {
    overflow: visible;
}
.modal-body.mx-window-body {
    overflow: visible;
}

If this bit is breaking your other styling, you can add a class popup-with-rich-text to the popup page to scope the CSS.

.popup-with-rich-text .modal-content.mx-window-content {
    overflow: visible;
}

.popup-with-rich-text .modal-body.mx-window-body {
    overflow: visible;
}
gitsno commented 5 years ago

The bubble toolbar can also be hidden by the standard Mendix navigation panel (the workaround given above does not affect the bubble toolbar). For example: image

The Quill option for handling this is the bounds option (https://quilljs.com/docs/configuration/#bounds) so can this be added to the properties of the rich-text widget? The bounds option could then be set to something like .region-content or .mx-name-myform to limit where popups are shown.