How to keep suggestions inside the editor? #3631

krzychukula · 2016-12-21T10:41:42Z

krzychukula
Dec 21, 2016

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.

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?

krzychukula · 2016-12-21T11:28:59Z

krzychukula
Dec 21, 2016
Author

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);
}

0 replies

krzychukula · 2016-12-21T11:35:28Z

krzychukula
Dec 21, 2016
Author

Additionally it seems inconsistent.
widgets default to true:

	// Editor.IContentWidget.allowEditorOverflow
	allowEditorOverflow = true;

while addWidget defaults to false:

allowEditorOverflow: widget.allowEditorOverflow || false,

0 replies

alexdima · 2017-01-13T09:59:21Z

alexdima
Jan 13, 2017
Maintainer

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.

0 replies

krzychukula · 2017-01-13T10:02:39Z

krzychukula
Jan 13, 2017
Author

So let's treat it as feature request then.

0 replies

belohlavek · 2017-09-27T11:36:55Z

belohlavek
Sep 27, 2017

Any updates?

0 replies

windischb · 2019-02-02T10:51:12Z

windischb
Feb 2, 2019

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

0 replies

krzychukula · 2019-02-03T18:56:48Z

krzychukula
Feb 3, 2019
Author

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

0 replies

stefan-lacatus · 2019-02-11T21:29:53Z

stefan-lacatus
Feb 11, 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

0 replies

krzychukula · 2019-02-12T09:29:26Z

krzychukula
Feb 12, 2019
Author

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

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)
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"

0 replies

rbretoneiche · 2020-05-29T09:27:34Z

rbretoneiche
May 29, 2020

Any Update ?

0 replies

cbn-falias · 2024-03-19T13:36:33Z

cbn-falias
Mar 19, 2024

For future readers:
If you're having troubles due to z-index or overflow like me, then overflowWidgetsDomNode might be a good alternative, as it allows you to render the widgets into your custom node (outside of the editor itself).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to keep suggestions inside the editor? #3631

{{title}}

Replies: 11 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to keep suggestions inside the editor? #3631

krzychukula Dec 21, 2016

Replies: 11 comments

krzychukula Dec 21, 2016 Author

krzychukula Dec 21, 2016 Author

alexdima Jan 13, 2017 Maintainer

krzychukula Jan 13, 2017 Author

belohlavek Sep 27, 2017

windischb Feb 2, 2019

krzychukula Feb 3, 2019 Author

stefan-lacatus Feb 11, 2019

krzychukula Feb 12, 2019 Author

rbretoneiche May 29, 2020

cbn-falias Mar 19, 2024

krzychukula
Dec 21, 2016

krzychukula
Dec 21, 2016
Author

krzychukula
Dec 21, 2016
Author

alexdima
Jan 13, 2017
Maintainer

krzychukula
Jan 13, 2017
Author

belohlavek
Sep 27, 2017

windischb
Feb 2, 2019

krzychukula
Feb 3, 2019
Author

stefan-lacatus
Feb 11, 2019

krzychukula
Feb 12, 2019
Author

rbretoneiche
May 29, 2020

cbn-falias
Mar 19, 2024