CODEWITHSUNDEEP
javascripttwitter-bootstraptinymce
Spyros Sakellaropoulos
Spyros Sakellaropoulos

Reputation: 79

TinyMCE cannot be full screen when placed in Bootstrap modal dialog

I try to make the TinyMCE editor to appear inside a modal but i can't make it fullscreen. Here's a jsfiddle, if you resize it the fullscreen covers up the area the modal would cover. http://jsfiddle.net/344y9brr/

Full screen is under View -> Fullscreen

Upvotes: 5

Views: 1606

Answers (2)

Envy
Envy

Reputation: 540

If you do not want to change original CSS of .modal-dialog, do this when init tinymce:

setup: function (editor) {
    editor.on('FullscreenStateChanged', function (e) {
        if (e.state) {
            $('.modal-dialog').attr('style', 'transform: none !important');
        } else {
            $('.modal-dialog').attr('style', 'transform: translate(0,0)');
        }
    });
}

Upvotes: 2

jim31415
jim31415

Reputation: 8818

When an element inside the modal dialog has position:fixed, the transforms affect the calculation of the element's position. This creates a problem when tinymce is viewed fullscreen.

Change transform: translate(0, 0); to the following in your style sheet:

.modal.in .modal-dialog {
  -webkit-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

Updated fiddle: jsfiddle.net/344y9brr/4/

The transform: translate(0, 0); creates a containing block for fixed-position descendants. See this question why -webkit-transform messes up with fixed childs for more info.

Upvotes: 6

Related Questions