microsoft / microsoft/monaco-editor
[Bug] fixedOverflowWidgets=true makes suggestion widget shows at a wrong location when monaco-editor is hosted inside fluent Callout control #2503
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
const value = /* set from `myEditor.getModel()`: */ `function hdsdello() {
alert('Hello world!');
}
func`;
// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
value,
language: "javascript",
automaticLayout: true,
fixedOverflowWidgets: true
});
<div style="transform: translate(84px, 165px); height: 100%;">
<div id="container" style="height: 100%"></div>
</div>
Reproduction Steps
No response
Actual (Problematic) Behavior
Suggestion widget shows at a wrong location (left is correct, top is incorrect) when fixedOverflowWidgets is true.
Old issue https://github.com/microsoft/monaco-editor/issues/2503.
Expected Behavior
I expect it to work in the same way as when fixedOverflowWidgets is true
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 with the linked Monaco Editor Playground reproduction and its create call using fixedOverflowWidgets: true, then compare the suggestion widget's position inside the transformed container with the reported screenshots. Trace the overflow-widget positioning path and verify that the widget's top and left coordinates are correct when Monaco is hosted in a Fluent Callout; done means the reproduced placement matches the expected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100