Microsoft/monaco-editor

[Bug] glyphMarginHoverMessage gets hidden by editor div

Open

#3,136 opened on Jun 9, 2022

View on GitHub
 (0 comments) (0 reactions) (2 assignees)JavaScript (1,283 forks)batch import
bugeditor-hoverhelp wanted

Repository metrics

Stars
 (14,836 stars)
PR merge metrics
 (Avg merge 6h 26m) (15 merged PRs in 30d)

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?

Monaco Editor Playground Code

Javascript


var jsCode = [
	'"use strict";',
	'function Person(age) {',
	'	if (age) {',
	'		this.age = age;',
	'	}',
	'}',
    '',
    '',
    '',
    '',
    '',
	'Person.prototype.getAge = function () {',
	'	return this.age;',
	'};'
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), {
	value: jsCode,
	language: 'javascript',
	glyphMargin: true,
    fixedOverflowWidgets: true
});

var decorations = editor.deltaDecorations(
	[],
	[
		{
			range: new monaco.Range(10, 1, 10, 1),
			options: {
				glyphMarginClassName: 'myGlyphMarginClass',
                glyphMarginHoverMessage: {
                    supportHtml: true,
                    value: "<span>This is <br>a very long <br>hover message. <br>But it is partially <br>visible.</span>"
                }
			}
		}
	]
);


Css:

#container {
    height: 200px;
    border: 1px solid grey;
}

Actual Behavior

glyphMarginHoverMessage is not visible fully when appear near to the bottom edge of editor. The hover message gets hidne by editor div.

Contributor guide