Monaco-editor: Let Monaco Editor fill the rest of the page

Created on 11 Aug 2017 · 3Comments · Source: microsoft/monaco-editor

I want to embed a Monaco Editor in a page under some fixed texts, I want the height of the Monaco Editor to fill the rest of the page. I tried this code, but it did not work:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <style>
      .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .rb #container {
        height: calc(100% - 80px)
        /* height: 100% does not work either */
        /* flex: 1 does not work either */
        /* height: 500px could set a fixed height */  
      }
    </style>
</head>
<body class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <div id="container"></div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript'
          });
        });
    </script>
</body>
</html>

Note that, previously, I had a solution for CodeMirror, here is a working JSBin cross-browser, where .rb .CodeMirror { height: calc(100% - 80px); } is used. So for Monaco Editor, we probably need to set a flexible height to something like .rb .MoncacoEditor rather than the current .rb #container... Does anyone know what class this should be?

Could anyone help?

Thank you

*question

Source

SoftTimur

Most helpful comment

@SoftTimur there are two options:

create the editor with the setting automaticLayout: true. This will make it that the editor installs a timer and checks every 100ms if its container has changed its size. This is the easiest option, but it also incurs some performance cost, as every 100ms a forced browser layout will occur.
determine the conditions under which the size of the container changes. It might be as easy as you listening on window resize, or, if you have dynamic content, whenever you update your dynamic content. You can then call editor.layout() and the editor will scan the size of its container.

As a further optimization to 2, if you can compute in JS the exact size of the editor, you can call editor.layout({ width: ..., height: ... }) in which case the editor will not scan the size of its container, and simply use the values you have passed in.

alexdima on 11 Aug 2017

👍5

All 3 comments

@SoftTimur there are two options:

create the editor with the setting automaticLayout: true. This will make it that the editor installs a timer and checks every 100ms if its container has changed its size. This is the easiest option, but it also incurs some performance cost, as every 100ms a forced browser layout will occur.
determine the conditions under which the size of the container changes. It might be as easy as you listening on window resize, or, if you have dynamic content, whenever you update your dynamic content. You can then call editor.layout() and the editor will scan the size of its container.

alexdima on 11 Aug 2017

👍5

@alexandrudima Thank you for your comment.

I am totally OK to sacrifice a little bit the performance. So let's first try Option 1. I use automaticLayout: true in this JSBin, I can see that the width is indeed automatically resized. But how could I set height such that it fills the rest of the page?

SoftTimur on 11 Aug 2017

People gave me an answer: JSBin.

It works perfectly in Chrome, but it does not display the editor in Safari because of max-height:100% of #container > *. If we set it to max-height:100vh or height: 100vh, it works more or less in Safari (with a little bit flashing when the focus reaches the bottom of the editor), whereas it shows a scroller while scrolling up and down in Chrome.

Isn't there a solution that works both in Chrome and Safari?

SoftTimur on 12 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings