Codemirror editor fullscreen - how to add custom functions to code mirror

Question

There is a nice example of how to make a fullscreen version of the CodeMirror editor. However this is not going to work if the CodeMirror widget is in the middle of some other position: absolute or relative div (the CodeMirror widget's absolute positioning won't be relative to the entire page anymore).

We can add a new command to CodeMirror to go fullscreen:

CodeMirror.commands.fullscreen = function (cm)
{
var fs_p = $(cm.getWrapperElement());

if ( cm._ic3Fullscreen == null) {
    cm._ic3Fullscreen = false;
    cm._ic3container = fs_p.parent();
}

if (!cm._ic3Fullscreen)
{
    fs_p = fs_p.detach();
    fs_p.addClass("CodeMirrorFullscreen");
    fs_p.appendTo("body");
    cm.focus();
    cm._ic3Fullscreen = true;
}
else
{
    fs_p = fs_p.detach();
    fs_p.removeClass("CodeMirrorFullscreen");
    fs_p.appendTo(cm._ic3container);
    cm.focus();
    cm._ic3Fullscreen = false;
}
};

After we need to bind this new command when creating the CodeMirror. Add this to the options:

extraKeys: {"F11": "fullscreen"}

The question is what to put in the CodeMirrorFullscreen CSS class to make sure fullscreen will work?

Answer 1

Using position: fixed instead of absolute should do the trick.

To test it out, just modify the CSS of CodeMirror's fullscreen.html demo as follows:

  form {
    position: relative;
  }
  .CodeMirror-fullscreen {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
  }

(The added form selector is not part of the solution. It's just there to make sure we're testing the case you care about – where using position: absolute in .CodeMirror-fullscreen doesn't work).