javascript - Monaco Editor force resize editor - Stack Overflow

I use the Monaco Editor.

My full code is too long to be posted here but this is my settings:

automaticLayout: true,
folding: false,
theme: 'vs-dark',
lineNumbers: 'off',
minimap: {
    enabled: false
}

Problem

• When I enlarge my window, the Monaco Editor follows as intended.
• When I reduce my Window, the Monaco Editor does not resize (height).

Question

How can I force a resize that I can trigger from my script?

What I've tried, that did not work

What did happend was that the console message was output on every window change, but not the Monaco height.

window.onresize = () => {
  console.log('Window resize');
  editor.layout();
});

Demo

I enlarge first and then reduce the height by making the developer console larger/smaller.

I use the Monaco Editor.

My full code is too long to be posted here but this is my settings:

automaticLayout: true,
folding: false,
theme: 'vs-dark',
lineNumbers: 'off',
minimap: {
    enabled: false
}

Problem

• When I enlarge my window, the Monaco Editor follows as intended.
• When I reduce my Window, the Monaco Editor does not resize (height).

Question

How can I force a resize that I can trigger from my script?

What I've tried, that did not work

What did happend was that the console message was output on every window change, but not the Monaco height.

window.onresize = () => {
  console.log('Window resize');
  editor.layout();
});

Demo

I enlarge first and then reduce the height by making the developer console larger/smaller.

• javascript
• resize
• height
• monaco-editor

Share Improve this question Follow asked Jan 29, 2020 at 9:13 Jens TörnellJens Törnell 24.8k4646 gold badges130130 silver badges223223 bronze badges 1

• 3 I would expect that with automaticLayout: true you don't need to handle layouting the editor manually anymore. – Mike Lischke Commented Oct 29, 2020 at 9:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

We have grappled with this too. The answer is to make the layout take an empty object rather than no parameter, so the resize function bees

window.onresize = () => {
  console.log('Window resize');
  editor.layout({});
});

Note that typescript does not like this, as the object apparently should contain both width and height.

window.onresize = () => {
  console.log('Window resize');
  editor.layout({} as monaco.editor.IDimension);
});

Fixes that issue.

This seems to have been a bug with the automaticLayout option when creating the editor. Using that option now works for me in 2023 and there is no longer any need to manually update the layout (as in some of the other answers).

monaco.editor.create(elem, {
  language: 'javascript', // or whatever
  automaticLayout: true,
});

I found min-height worked great:

height:100%
width:100%
min-height:100%
min-width:100%

Can I suggest that you do post the full code using the Stack Overflow snippet/insert code button from the toolbar to give more context.

I do something similar to help redraw & resize when the window is resized and use .layout() function without any problems.

As ‘editor’ could be null or not be widely available in the scope of this window resize function, it would be good to see the code please