Monaco-editor: How to keep suggestions inside the editor?

Created on 21 Dec 2016  路  10Comments  路  Source: microsoft/monaco-editor

monaco-editor npm version: 0.7.0
Browser: Chrome
OS: OSX
How Can I keep suggestions inside editor? Suggestions should respect boundaries of the layout - not entire browser.

screen shot 2016-12-21 at 11 18 32

In this context I would like to see suggestions right corner to be aligned to the editor right corner.

Is it possible in current version as a flag or is there any way to manually fix suggestions window position?

feature-request suggest
Source
picture krzychukula

Most helpful comment

Any updates?

picture belohlavek on 27 Sep 2017
👍4

All 10 comments

I have tried:
fixedOverflowWidgets: true but it's not working or it's intended to do something different - not sure.

I have tried:

 for (const prop in this.editor.contentWidgets) {
      const contentWidget = this.editor.contentWidgets[prop];
      contentWidget.widget.allowEditorOverflow = false;
}

but it is used in addWidget so it's already to late:

if (widgetData.allowEditorOverflow) {
    this.overflowingContentWidgetsDomNode.appendChild(domNode);
} else {
    this.domNode.appendChild(domNode);
}
krzychukula picture krzychukula on 21 Dec 2016

Additionally it seems inconsistent.
widgets default to true:

    // Editor.IContentWidget.allowEditorOverflow
    allowEditorOverflow = true;

while addWidget defaults to false:

allowEditorOverflow: widget.allowEditorOverflow || false,
krzychukula picture krzychukula on 21 Dec 2016

Each content widget can set allowEditorOverflow as it desires. The suggest widgets sets it to true.

We do not currently have an editor option to override/ignore that.

alexdima picture alexdima on 13 Jan 2017

So let's treat it as feature request then.

krzychukula picture krzychukula on 13 Jan 2017

Any updates?

belohlavek picture belohlavek on 27 Sep 2017
👍4

Having the same problem...
Is there any workaround?

windischb picture windischb on 2 Feb 2019

I used internals to move them to the dom root - but didn't update Monaco for some time already because of it

krzychukula picture krzychukula on 3 Feb 2019

Each content widget can set allowEditorOverflow as it desires. The suggest widgets sets it to true.

We do not currently have an editor option to override/ignore that.

I can try to add a PR for this in vscode. Can you confirm that this is how you want it to work?
Have a flag on the editor called keepWidgetsWithEditor with 2 values:
* true - all widgets will be forced to be drawn with the editor viewport. We do this by updating only vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts
* false - the default value, representing the current behavior

stefan-lacatus picture stefan-lacatus on 11 Feb 2019

In my case problem was mostly because of z-index - suggestions were partly hidden under other UI elements.

  1. Keeping them within UI of the editor would help but I feel it would impact UX (try it with an editor that has only 2 lines of text or even one)
  2. What would work better in my case is what I did - move modals to the end of <body> to avoid all z-index issues by being last thing in DOM.

For (2) it could be optional field like:

idOfElementToPlaceModals: "domElementId"
krzychukula picture krzychukula on 12 Feb 2019

Any Update ?

rbretoneiche picture rbretoneiche on 29 May 2020
👀2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Kedyn picture Kedyn  路  3Comments
chengtie picture chengtie  路  3Comments
SoftTimur picture SoftTimur  路  3Comments
galyech picture galyech  路  3Comments
poloten4uk picture poloten4uk  路  3Comments