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!
source:https://uonfu.com/
Github User Rank List