javascript - TinyMCE cannot be full screen when placed in Bootstrap modal dialog - Stack Overflow

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. /

Full screen is under View -> Fullscreen

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/344y9brr/

Full screen is under View -> Fullscreen

• javascript
• twitter-bootstrap
• tinymce

Share Improve this question Follow edited Dec 19, 2017 at 11:51 Envy 54066 silver badges2020 bronze badges asked Dec 10, 2014 at 15:46 Spyros SakellaropoulosSpyros Sakellaropoulos 7911 silver badge77 bronze badges 5

• the problem seems to be with the modal not going full width when the browser is in full screen mode... interesting. – pherris Commented Dec 10, 2014 at 16:11
• Does this answer your question? stackoverflow./a/18522320/1861459 – pherris Commented Dec 10, 2014 at 16:13
• pherris , no, this makes the modal full window (and in turn the things inside the modal , tinymce in this case, fullscreen. I want a regular modal and the tinymce button will make it fullscreen) – Spyros Sakellaropoulos Commented Dec 10, 2014 at 16:19
• I'm not sure you'll be able to make tinymce full screen without it covering the modal window. Maybe I don't quite understand your question. – pherris Commented Dec 10, 2014 at 16:21
• The tinymce has a fullscreen function (found inside View->fullscreen). But it won't cover the full screen width,height it will cover the width the height the modal takes up. If i move the html code outside of modal it will cover everything. – Spyros Sakellaropoulos Commented Dec 10, 2014 at 16:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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/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.

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)');
        }
    });
}