Can editor stretch to fit its content? .editor{height: auto} #794

GitKou · 2018-04-02T07:52:37Z

monaco-editor version: 0.10.1

div.editor{height: auto}
It seems like the monaco-eidtor's height depends on its container's height,
but its container's height is auto, I want the container(div.editor)'s height could be stretched by its content.

troy351 · 2018-04-02T09:00:32Z

A specific height is needed for container. Code could be hundreds of lines, and makes no sense to stretch editor by its content.
btw, you could use editor.layout() to re-layout the editor

acautin · 2018-04-23T09:58:18Z

@troy351 it is possible to get the size of the editor and then maybe decide to resize the container up to a certain limit, much like this github comment works ?

troy351 · 2018-04-23T10:06:20Z

const contentHeight = editor.getModel().getLineCount() * 19 ; // 19 is the line height of default theme.
then you can set your container's height with contentHeight and run editor.layout()

David-Mulder · 2018-10-02T14:07:29Z

@troy351 This will give incorrect results if you have collapsed content

troy351 · 2018-10-04T16:56:08Z

@David-Mulder Good catch.
I did a lot of search but didn't find a onDidFoldingChange listener or a getFoldedLineCount method.
After trying for a long time, I figured out a hacky way to make it work.

// disable scroll beyond last line
editor.updateOptions({ scrollBeyondLastLine: false });

const LINE_HEIGHT = 18;
const CONTAINER_GUTTER = 10;

const el = editor.domElement;
const codeContainer = el.getElementsByClassName('view-lines')[0];

let prevLineCount = 0;

editor.onDidChangeModelDecorations(() => {
  // wait until dom rendered
  setTimeout(() => {
    const height =
      codeContainer.childElementCount > prevLineCount
        ? codeContainer.offsetHeight // unfold
        : codeContainer.childElementCount * LINE_HEIGHT + CONTAINER_GUTTER; // fold
    prevLineCount = codeContainer.childElementCount;

    el.style.height = height + 'px';

    editor.layout();
  }, 0);
});

BTW, a debounce is suggested for the listener.

abersnaze · 2019-02-17T06:11:52Z

I added an extra check that if codeContainer.offsetHeight === 0 to reschedule the wait until dom timeout again.

raedle · 2019-02-17T09:31:46Z

@abersnaze Could you provide the complete code sample? Thanks

abersnaze · 2019-02-18T02:02:12Z

https://gist.github.com/abersnaze/efac6927e17187550d4f5d795334ccae

BrianLeishman · 2019-06-05T18:21:59Z

@troy351 this actually works with word wrap enabled as well, nice job

bagdonas · 2020-02-07T12:21:28Z

In 0.19.3 the following seems to work without touching DOM to guess what the editor size is:

editor.onDidChangeModelDecorations(() => {
    updateEditorHeight() // typing
    requestAnimationFrame(updateEditorHeight) // folding
})

let prevHeight = 0

const updateEditorHeight = () => {
    const editorElement = editor.getDomNode()

    if (!editorElement) {
      return
    }

    const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight)
    const lineCount = editor.getModel()?.getLineCount() || 1
    const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight

    if (prevHeight !== height) {
      prevHeight = height
      editorElement.style.height = `${height}px`
      editor.layout()
    }
  }

alexdima · 2020-09-08T15:34:58Z

Starting with 0.20.x, there is editor.getContentHeight(). This can be queried and the outer container height can be set to this value: e.g.

At https://microsoft.github.io/monaco-editor/playground.html

const width = 300;
const container = document.getElementById('container');
container.style.border = '1px solid #f00';
const editor = monaco.editor.create(container, {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: "javascript",
    scrollBeyondLastLine: false,
    wordWrap: 'on',
    wrappingStrategy: 'advanced',
    minimap: {
        enabled: false
    },
    overviewRulerLanes: 0
});
let ignoreEvent = false;
const updateHeight = () => {
	const contentHeight = Math.min(1000, editor.getContentHeight());
	container.style.width = `${width}px`;
	container.style.height = `${contentHeight}px`;
	try {
		ignoreEvent = true;
		editor.layout({ width, height: contentHeight });
	} finally {
		ignoreEvent = false;
	}
};
editor.onDidContentSizeChange(updateHeight);
updateHeight();

contentSizeChange event, adopt the new padding option to do away with the TopMargin hack Monaco 0.20 introduced a `getContentHeight` API that enables us to get the current editor height without resorting to hacks around line counts. This also handles cases such as code folding. See this issue for details: microsoft/monaco-editor#794 Also added more type checking in the editor instantiation, leveraged the new padding option to do away with the TopMargin work around.

ppazos · 2022-05-27T05:59:41Z

@alexdima the solution doesn't seem to work for the diff editor. I get getContentHeight and onDidContentSizeChange are not defined for the diff editor. Any clues on how that could work?

DavidDiao · 2022-09-22T07:37:19Z

@alexdima the solution doesn't seem to work for the diff editor. I get getContentHeight and onDidContentSizeChange are not defined for the diff editor. Any clues on how that could work?

For diff editor, you can get the top of the last line of the two editors respectively and take the maximum value

container.style.height = Math.max(
  diffEditor.getOriginalEditor().getTopForLineNumber(diffEditor.getModel().original.getLineCount()),
  diffEditor.getModifiedEditor().getTopForLineNumber(diffEditor.getModel().modified.getLineCount()),
) + 19 + 'px';
diffEditor.layout();

Or calculate from diffEditor.getLineChanges() (I didn't test this solution)

let lineCount = {
  original: diffEditor.getModel().original.getLineCount(),
  modified: diffEditor.getModel().modified.getLineCount(),
};
for (let change of diffEditor.getLineChanges()) {
  if (!change.modifiedEndLineNumber) lineCount.modified += change.originalEndLineNumber - change.originalStartLineNumber + 1;
  else if (!change.originalEndLineNumber) lineCount.original += change.modifiedEndLineNumber- change.modifiedStartLineNumber + 1;
  else {
    let diff = (change.originalEndLineNumber - change.originalStartLineNumber) - (change.modifiedEndLineNumber- change.modifiedStartLineNumber);
    if (diff > 0) lineCount.modified += diff;
    else lineCount.original -= diff;
  }
}
container.style.height = Math.max(
  lineCount.original,
  lineCount.modified,
) * 19 + 'px';
diffEditor.layout();

Note that IDiffEditor doesn't provide getOption() and two editors can have different settings, so I directly used default line height.

zenatshockbyte · 2022-10-11T12:29:39Z

For diff editor, you can get the top of the last line of the two editors respectively and take the maximum value

container.style.height = Math.max(
  diffEditor.getOriginalEditor().getTopForLineNumber(diffEditor.getModel().original.getLineCount()),
  diffEditor.getModifiedEditor().getTopForLineNumber(diffEditor.getModel().modified.getLineCount()),
) + 19 + 'px';
diffEditor.layout();

This is perfect with renderSideBySide: false but something else seems necessary for renderSideBySide: true

zenatshockbyte · 2022-10-12T07:23:36Z

const originalLineCount = editorInstance.getModel()?.original.getLineCount() || 0;

let finalLineCount = originalLineCount;

for (let change of editorInstance.getLineChanges() || []) {
    let diff = change.modifiedEndLineNumber - change.modifiedStartLineNumber + 1;
    finalLineCount += Math.abs(diff);
}
editor.value.style.height = finalLineCount * 18 + "px";

Seems to work for me, though haven't tested with many different diffs yet

DavidDiao · 2022-10-12T07:54:45Z

const originalLineCount = editorInstance.getModel()?.original.getLineCount() || 0;

let finalLineCount = originalLineCount;

for (let change of editorInstance.getLineChanges() || []) {
    let diff = change.modifiedEndLineNumber - change.modifiedStartLineNumber + 1;
    finalLineCount += Math.abs(diff);
}
editor.value.style.height = finalLineCount * 18 + "px";

Seems to work for me, though haven't tested with many different diffs yet

It doesn't work. For example, one empty line in original and two empty lines in modified got finalLineCount=1, but should be 2.
Here's another more complex example. original: 1\n3\n4\n5, modified: 0\n1\n2\n3\n5

chengtie · 2023-01-17T08:10:16Z

Starting with 0.20.x, there is editor.getContentHeight(). This can be queried and the outer container height can be set to this value: e.g.

At https://microsoft.github.io/monaco-editor/playground.html

const width = 300;
const container = document.getElementById('container');
container.style.border = '1px solid #f00';
const editor = monaco.editor.create(container, {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: "javascript",
    scrollBeyondLastLine: false,
    wordWrap: 'on',
    wrappingStrategy: 'advanced',
    minimap: {
        enabled: false
    },
    overviewRulerLanes: 0
});
let ignoreEvent = false;
const updateHeight = () => {
	const contentHeight = Math.min(1000, editor.getContentHeight());
	container.style.width = `${width}px`;
	container.style.height = `${contentHeight}px`;
	try {
		ignoreEvent = true;
		editor.layout({ width, height: contentHeight });
	} finally {
		ignoreEvent = false;
	}
};
editor.onDidContentSizeChange(updateHeight);
updateHeight();

I realized that if we remove wordWrap: 'on' from the options, updateHeight is triggered twice when we type 1 character in the editor, is it an expected behavior? In my editor, we need horizontal scrolling and don't want to set wordWrap: 'on'.

const width = 300;
const container = document.getElementById('container');
container.style.border = '1px solid #f00';
const editor = monaco.editor.create(container, {
	value: "abc",
	language: "javascript",
    scrollBeyondLastLine: false,
    wrappingStrategy: 'advanced',
    minimap: {
        enabled: false
    },
    overviewRulerLanes: 0
});
let ignoreEvent = false;
const updateHeight = () => {
        console.log("updateHeight is triggered")
	const contentHeight = Math.min(1000, editor.getContentHeight());
	container.style.width = `${width}px`;
	container.style.height = `${contentHeight}px`;
	try {
		ignoreEvent = true;
		editor.layout({ width, height: contentHeight });
	} finally {
		ignoreEvent = false;
	}
};
editor.onDidContentSizeChange(updateHeight);
updateHeight();

xhd2015 · 2023-01-29T10:49:46Z

seems we can omit arguments for editor.layout() :

~~editor.layout({ width, height: contentHeight });~~

editor.layout();

hediet · 2023-02-21T17:19:14Z

This works:

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.0-dev.20230221#XQAAAAJlAwAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw5mjaUk9VGmxoyTzHe8U3Wtpjsr3iuTGKtlMfj1i13U-2gw_GQSp0kweizye4hh9kXqlfpwNv70ACnzADbKh6Es4jRUJ2eRElcXB0KO1wOvb6PCp940DUBfTUt0HbS3cQaJmRruoC0vk9BtV23jeM2auvDPLd0ZiKrihRF-j2jsgnRokOwWm0btsjM0mDkExQtVSotORUpCQK-plcyvxr2JPF-osgcOIauI1pamSQCpogsjhR4AU6jBC3hPKKehzblJQn0-xH-2qDCkO1jygllGogMb0M6zuQKH5rgqSMwsU9SWj4MtlV-qCr_Dwjbgoyb2ePjcgtznEEtYOq5u6g-1a-CMuP6kaD1hWAs6VjH0QfgLGmhtdAmeaeYJ3nzLPsXXMKizCAYOpAeAlr44qOmuIOfShb9fgg6xkOJaQAmDZ0VPaH-YkxWKQL-KEBXwGOYl9Z1lq0AY4KTH0kijq8WtRGLQGQwCtE_uZB0wWstq3taY-pu28Vn-h3t0uXPwBtwSimzXIi3PQQNRHyG6WZlOF2IjMb0Hf_T6zh_JUxWPn_hxs5NGMk59BfaaZN7cwScLSNTU1-ych6ZybEMP9N8YEA

alexdima added the feature-request Request for new features or functionality label Mar 1, 2019

alexdima added this to the On Deck milestone Mar 1, 2019

alexdima self-assigned this Dec 10, 2019

alexdima modified the milestones: On Deck, Backlog Dec 16, 2019

trevorade mentioned this issue Jan 13, 2020

getRawOptions is not compatible with older getConfiguration #1734

Closed

azatsarynnyy mentioned this issue Aug 12, 2020

GH-8361: Fixed editor resizing issue in Output. eclipse-theia/theia#8362

Merged

1 task

domoritz mentioned this issue Sep 17, 2020

auto growing height react-monaco-editor/react-monaco-editor#308

Closed

MatthewCaseres mentioned this issue Sep 27, 2020

How to make editor autoresizable suren-atoyan/monaco-react#82

Open

PhilippHeuer mentioned this issue Sep 30, 2020

Increase the size of the CodeEditor used for additionalJsonData simPod/GrafanaJsonDatasource#126

Merged

starpit mentioned this issue Oct 6, 2020

UX: SourceRef should be default-expanded in Notebooks? kubernetes-sigs/kui#5866

Closed

gzuidhof mentioned this issue Dec 8, 2020

Revealing collapsed "advanced editor" cells does not reveal the whole cell gzuidhof/starboard-notebook#15

Closed

vivek1729 mentioned this issue Jul 24, 2021

fix: update editor resize handler to incorporate the new contentsizechange event and adopt padding option nteract/nteract#5587

Merged

4 tasks

softmarshmallow mentioned this issue Oct 9, 2021

how to access editor.onDidContentSizeChange suren-atoyan/monaco-react#296

Closed

Coleim mentioned this issue Dec 5, 2022

CSS editor full height Coleim/online-code-typewriter#8

Open

MatrixFun mentioned this issue Jan 13, 2023

getContentHeight in @monaco-editor/react does not look correct suren-atoyan/monaco-react#442

Open

hediet closed this as not planned Won't fix, can't repro, duplicate, stale Feb 21, 2023

github-actions bot locked and limited conversation to collaborators Apr 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can editor stretch to fit its content? .editor{height: auto} #794

Can editor stretch to fit its content? .editor{height: auto} #794

GitKou commented Apr 2, 2018

troy351 commented Apr 2, 2018

acautin commented Apr 23, 2018

troy351 commented Apr 23, 2018 •

edited

Loading

David-Mulder commented Oct 2, 2018

troy351 commented Oct 4, 2018 •

edited

Loading

abersnaze commented Feb 17, 2019

raedle commented Feb 17, 2019

abersnaze commented Feb 18, 2019

BrianLeishman commented Jun 5, 2019

bagdonas commented Feb 7, 2020 •

edited

Loading

alexdima commented Sep 8, 2020 •

edited

Loading

ppazos commented May 27, 2022

DavidDiao commented Sep 22, 2022 •

edited

Loading

zenatshockbyte commented Oct 11, 2022 •

edited

Loading

zenatshockbyte commented Oct 12, 2022 •

edited

Loading

DavidDiao commented Oct 12, 2022

chengtie commented Jan 17, 2023 •

edited

Loading

xhd2015 commented Jan 29, 2023

hediet commented Feb 21, 2023

Can editor stretch to fit its content? .editor{height: auto} #794

Can editor stretch to fit its content? .editor{height: auto} #794

Comments

GitKou commented Apr 2, 2018

troy351 commented Apr 2, 2018

acautin commented Apr 23, 2018

troy351 commented Apr 23, 2018 • edited Loading

David-Mulder commented Oct 2, 2018

troy351 commented Oct 4, 2018 • edited Loading

abersnaze commented Feb 17, 2019

raedle commented Feb 17, 2019

abersnaze commented Feb 18, 2019

BrianLeishman commented Jun 5, 2019

bagdonas commented Feb 7, 2020 • edited Loading

alexdima commented Sep 8, 2020 • edited Loading

ppazos commented May 27, 2022

DavidDiao commented Sep 22, 2022 • edited Loading

zenatshockbyte commented Oct 11, 2022 • edited Loading

zenatshockbyte commented Oct 12, 2022 • edited Loading

DavidDiao commented Oct 12, 2022

chengtie commented Jan 17, 2023 • edited Loading

xhd2015 commented Jan 29, 2023

hediet commented Feb 21, 2023

troy351 commented Apr 23, 2018 •

edited

Loading

troy351 commented Oct 4, 2018 •

edited

Loading

bagdonas commented Feb 7, 2020 •

edited

Loading

alexdima commented Sep 8, 2020 •

edited

Loading

DavidDiao commented Sep 22, 2022 •

edited

Loading

zenatshockbyte commented Oct 11, 2022 •

edited

Loading

zenatshockbyte commented Oct 12, 2022 •

edited

Loading

chengtie commented Jan 17, 2023 •

edited

Loading