Tooltip Z-index issue with RichText Editor inside DHX Window

[Czeslaw]

When using the RichText editor inside a DHX Window, the toolbar tooltips are displayed behind the window (see screenshot).

Code Example:

const win = new dhx.Window({
    title: 'test'
});

const form = new dhx.Form(null, {
    css: "dhx_widget--bg_white dhx_widget--bordered",
    padding: 40,
    rows: [
        {
            type: "input",
            label: "Email",
            name: "email",
            placeholder: "jd@mail.name"
        },
        {
            type: "container",
            name: "richtextContainer",
            height: 400
        }
    ]
});

let richtextInstance = null;

function initRichtextWhenReady() {
    const selector = '[data-cell-id="richtextContainer"] .dhx_layout-cell';
    let attempts = 0;
    const maxAttempts = 100;

    function tryInit() {
        const containerEl = document.querySelector(selector);
        if (containerEl) {
            richtextInstance = new richtext.Richtext(containerEl, {
                value: "<p>Hello Richtext</p>"
            });
            return;
        }

        if (attempts < maxAttempts) {
            attempts++;
            setTimeout(tryInit, 10);
        }
    }
    tryInit();
}
win.attach(form)
win.show()

initRichtextWhenReady();

[Siarhei]

Hello @Czeslaw,

Thank you for noticing this behaviour - it seems like there is a bit of whitespace in the designed integration between these components.
I already sent it to the dev team, and they will consider the best approach to solve this case. I will notify you of any updates on this case.

Currently, it can be avoided by manually redefining wx-popup z-index - so it won’t be hidden by “window”:

    .wx-popup{
        z-index: 10000001 !important;
    } 

Here is an example:

DHTMLX Snippet Tool

Warm regards,