microsoft / microsoft/monaco-editor
[Bug] Error tooltip is shown above when there is space on the bottom and no space on the top when parent element has "transform" attribute
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
Monaco Editor Playground Code
function validate(model) {
const markers = [];
// lines start at 1
for (let i = 1; i < model.getLineCount() + 1; i++) {
const range = {
startLineNumber: i,
startColumn: 1,
endLineNumber: i,
endColumn: model.getLineLength(i) + 1,
};
const content = model.getValueInRange(range).trim();
const number = Number(content);
if (Number.isNaN(number)) {
markers.push({
message: "not a number",
severity: monaco.MarkerSeverity.Error,
startLineNumber: range.startLineNumber,
startColumn: range.startColumn,
endLineNumber: range.endLineNumber,
endColumn: range.endColumn,
});
} else if (!Number.isInteger(number)) {
markers.push({
message: "not an integer",
severity: monaco.MarkerSeverity.Warning,
startLineNumber: range.startLineNumber,
startColumn: range.startColumn,
endLineNumber: range.endLineNumber,
endColumn: range.endColumn,
});
}
}
monaco.editor.setModelMarkers(model, "owner", markers);
}
const value = `12345
abcd
234.56
12345
abcd
234.56`;
const uri = monaco.Uri.parse("inmemory://test");
const model = monaco.editor.createModel(value, "demoLanguage", uri);
const editor = monaco.editor.create(document.getElementById("container"), {
model,
});
validate(model);
model.onDidChangeContent(() => {
validate(model);
});
Reproduction Steps
Hover on the underlined error element on the second line
Actual (Problematic) Behavior
There is much more space on the bottom, however, element is show on the top for some reason.
In my production code, monaco-editor is inside material-ui dialog that uses transform: translate(x,y) styles to position dialog.
For my use case it looks in the following way. There is a lot of space in the bottom, but tooltip is shown above.
For some reason, it happens only when you move parent with "transform" styles to the bottom of the screen, when it is on the top, everything works fine.
fixedOverflowWidgets
I cannot use fixedOverflowWidgets: true setting due to the following issue that I've recently created.
https://github.com/microsoft/monaco-editor/issues/4579
Expected Behavior
Tooltip with the error should be shown in bottom part, as there is more space there.
Additional Context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Monaco Editor Playground reproduction and reviewing the provided marker and hover setup. Trace how the error tooltip chooses its position when the editor's parent uses transform and compare available space above and below. Done means the tooltip appears below when that side has more room, without breaking the reported reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100