Strange behavior for widgets after setting fixedOverflowWidgets: true

[hacker0limbo]

monaco-editor version: 0.21.0
Browser: Chrome
OS: MacOS
Playground code that reproduces the issue:

To fix some layout issue, i just give monaco editor parent container with overflow: hidden, and give fixedOverflowWidgets: true when setup the monaco editor to try to solve widgets display issue. However my editor behaves strangely for all related widgets. Because of some reason i am not able to show code, the screenshot are listed:

Before i set fixedOverflowWidgets: true, since i am adding overflow: hidden, this behaves normally(widgets get hidden) as expected:

After i add fixedOverflowWidgets: true try to solve problems caused by overflow: hidden:

Although The suggestion widgets and hover widgets can fully displayed, the are now moving far away from my text input. I have no idea why this happens. Is there any solutions to fix this behavior or is there alternative ways to solve widgets displaying problems when i am setting overflow: hidden to the parent element of monaco editor?

Cheers!

[alexdima]

@hacker0limbo Can you please provide a sample on how you are instantiating the editor? You can use one of the samples at https://github.com/microsoft/monaco-editor-samples and modify it to illustrate the usage.

[hacker0limbo]

@alexdima well i think i solved the problem. Although i am not sure what cause it but now everything works well. Thanks for your comment and this project, gonna close this issue.

[weizhang-ms]

@hacker0limbo may I ask how you fixed this? I'm placing monaco-editor inside fluent Callout control and see the same behavior

[hacker0limbo]

@hacker0limbo may I ask how you fixed this? I'm placing monaco-editor inside fluent Callout control and see the same behavior

@weizhang-ms hello, actually i didn't solve it perfectly, what i did was avoid using fixedOverflowWidgets: true and conditionally set overflow: hidden. It's a little bit complicated to explain this since there is no context and sample code provided. A pseudo code in my project might looks like this

if (conditionA && B && c) {
  // set overflow: hidden 
} else {
  // don't touch this attribute
}

It's been a while ago since i encountered this issue, i am not sure if they fix it, and hope this helps. If you still unsure what to do, open a new issue with more details and providing some sample code, they will give you advice immediately.

[turbozv]

@hacker0limbo I see, thanks for the info!

I created a new issue with sample repro code: #2503