tinymce in bootstrap modal: wrong dropdown position on scroll

Question

I'm using tinymce inside a bootstrap modal but I'm having a problem with tinymce dropdowns on page scroll: basically their absolute positions are not updated and they are shown in the wrong position. I prepared a jsbin to show the problem: just open the color picker and scroll the page.

Any hints? Anyone had the same issue and managed to make it work?

Thanks

Answer 1

In addition to user206056 css answer:

.mce-menu {position:fixed !important}

try adding to your TinyMCE init method, adding the ui_container parameter and set it to the selector of your bootstrap modal.

Something like:

 tinymce.init({
    selector: '.my-mce-selector',
    ui_container: '.modal', // bootstrap modal
    // your other options ... 
});

Although, this doesn't work in all cases (like inline: true), you may want to follow the GitHub issue for updates.

Answer 2

Just stumbled upon the same problem. Solved this by adding

.mce-menu {position:fixed !important}

to my css file holding page styles. Hope this helps

Answer 3

for newer tinymce version, try this:

.tox-tinymce-aux {
     position: relative !important;
     z-index: 10055;
}

just make sure the value of your z-index is larger than your modal's z-index.