4

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
Envy
  • 510
  • 6
  • 19
Spyros Sakellaropoulos
  • 69
  • 1
  • 7
  • the problem seems to be with the modal not going full width when the browser is in full screen mode... interesting. – pherris Dec 10 '14 at 16:11
  • Does this answer your question? http://stackoverflow.com/a/18522320/1861459 – pherris Dec 10 '14 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 Dec 10 '14 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 Dec 10 '14 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 Dec 10 '14 at 16:24

2 Answers2

5

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.

Community
  • 1
  • 1
jim31415
  • 8,588
  • 6
  • 43
  • 64
  • @Abdo-Host, click the expand button -- editor expands to fit the screen. What's not working for you? – jim31415 Nov 23 '16 at 16:40
2

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)');
        }
    });
}
Envy
  • 510
  • 6
  • 19