profile
viewpoint

Ask questionsEditor props/extends the actual width of the parent that is a flexbox item

<!-- Do you have a question? Please ask it on https://stackoverflow.com/questions/tagged/monaco-editor --> monaco-editor version: 0.17.0 (latest) Browser: Edge dev 76.0.182.6 OS: Windows 10

When the editor is placed inside a flexbox item, it will prop the item horizontally and actually the flexbox item (and eventually the editor) cannot shrink back with editor.layout(), unless we explicitly specify a smaller width in layout method.

Steps or JS usage snippet reproducing the issue: Go to https://microsoft.github.io/monaco-editor/playground.html , then enter the following code and click "run" button.

JS

var edt = monaco.editor.create(document.getElementById("container"), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: "javascript",
    automaticLayout: true
});

CSS

/*
.monaco-editor {
    position: absolute;
}
*/

HTML

<div style="display: flex; background-color: #CCCCFF">
    <div style="background-color: #CCCCCC;">--- Test ---</div>
    <div id="container" style="flex: 1 1 auto; border: 2px solid red; height: 100px"></div>
</div>

Resize the window. When the window is shrinking in width, the editor cannot shrink accordingly. Actually the container has been propped by the editor horizontally.

image image

Remove the comment marks in "CSS" tab, click "Run", and resize the window again. This time the editor can resize properly. image

microsoft/monaco-editor

Answer questions redbullmarky

Hey, found this issue due to the same problem. Also found a (lucky solution) whilst I still had the tab open :) Below is my rough structure

#code_editor below is what monaco is set up to use. I put an overflow:hidden on the 'main' panel's div. and voila! Seems that's all that's needed :) Both methods for resizing (manual via window resize listener, as well as Monaco's automaticLayout) worked perfectly; the latter being somewhat 'smoother'

<div class="ide">
   <div class="ide-main" style="overflow: hidden;">
      <div class="ide-editor-wrapper">
         <div class="ide-editor" id="code_editor"></div>
      </div>
      <div class="ide-console"></div>
   </div>
   <div class="ide-sidebar">
      ...sidebar content...
   </div>
.ide { display:flex; flex-direction:row; }
.ide-main { flex:3; display:flex; flex-direction:column; }
useful!

Related questions

Monarch: How do you add "@keywords" key to "language object"? (undocumented) hot 3
Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/goToCommands' hot 2
Removing the tooltip on the read-only editor that says &#39;cannot edit in read-only editor&#39; hot 1
Monaco paste event hot 1
Registering/Providing custom Commands/CodeActions hot 1
How to get the line count including line wraps hot 1
Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/goToDefinition/goToDefinitionCommands' hot 1
TypeScript declaration preview from extra lib results in error hot 1
Problem with insane.js while using monaco-editor@0.18.0 hot 1
Change the language of an existing editor hot 1
javascript/typescript typedefs lost when webworker times out hot 1
Can't scroll in firefox hot 1
How to add simple custom language support? hot 1
monaco-editor polute the global variables, making incompatible with other JS libraries, such as CodeMirror, RequireJS, SeaJS, etc. hot 1
Highlight merge conflicts in monaco like in VSCode hot 1
Github User Rank List