CODEWITHSUNDEEP
twitter-bootstraptinymcebootstrap-modaltinymce-4
Dario
Dario

Reputation: 6280

tinymce in bootstrap modal: wrong dropdown position on scroll

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

Upvotes: 6

Views: 4227

Answers (3)

JuliaJ
JuliaJ

Reputation: 107

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.

Upvotes: 1

mfink
mfink

Reputation: 1380

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.

Upvotes: 7

user2061056
user2061056

Reputation: 49

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

Upvotes: 3

Related Questions