Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error tool tips lose styling when using overflowWidgetsDomNode #2233

Closed
parkertomatoes opened this issue Nov 25, 2020 · 2 comments
Closed

Error tool tips lose styling when using overflowWidgetsDomNode #2233

parkertomatoes opened this issue Nov 25, 2020 · 2 comments
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug editor-hover

Comments

@parkertomatoes
Copy link

parkertomatoes commented Nov 25, 2020

I was trying to solve the issue of clipped tool-tips when embedding an editor in a container with an overflow: hidden style.

This code reproduces that problem in the playground. Hover over the error squiggles to observe.

var jsCode = [
	'this is an error'
].join('\n');

const container = document.getElementById("container");
const subContainer = document.createElement('div');
container.appendChild(subContainer);

subContainer.style.marginTop = '100px';
subContainer.style.overflow = 'hidden';
subContainer.style.height = '200px';

var editor = monaco.editor.create(subContainer, {
	value: 'this is an error',
	language: "javascript"
});

I tried to fix it by using the overflowWidgesDomNode option:

var editor = monaco.editor.create(subContainer, {
	value: 'this is an error',
	language: "javascript",
        overflowWidgetsDomNode: document.body,
        fixedOverflowWidgets: true
});

Which worked, but all the styling disappears from the tool-tip:
image

I traced the issue to here:
https://github.com/microsoft/vscode/blob/master/src/vs/editor/contrib/hover/hover.ts#L339

Where a bunch of styles are added under .monaco-editor .monaco-hover. Adding this code to the playground code fixes the colors (though "peek problem") is still unstyled:

for (const styleElement of document.getElementsByTagName('style')) {
    styleElement.innerHTML = styleElement.innerHTML.replaceAll('.monaco-editor .monaco-hover', '.monaco-hover');
}

Is a bug, or am I using this feature incorrectly?

Thanks,

@alexdima alexdima added the bug Issue identified by VS Code Team member as probable bug label Dec 28, 2020
@alexdima alexdima self-assigned this Dec 28, 2020
@blutorange
Copy link
Contributor

Workaround for the CSS issue seems to be to add the monaco-editor style class to the container for the overflowWidgetsDomNode (see issue #2156)

document.querySelector('body').classList.add('monaco-editor');

But overflowWidgetsDomNode also seems to be having issues with events (e.g. renaming via F2 does not work), so this option probably shouldn't be used for now.

@kristw
Copy link

kristw commented Nov 6, 2022

Thanks for the workaround!

@microsoft microsoft locked and limited conversation to collaborators Mar 13, 2023
@hediet hediet converted this issue into discussion #3817 Mar 13, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
bug Issue identified by VS Code Team member as probable bug editor-hover
Projects
None yet
Development

No branches or pull requests

4 participants