monaco-editor icon indicating copy to clipboard operation
monaco-editor copied to clipboard

[Bug] glyphMarginHoverMessage gets hidden by editor div

Open Aayush04 opened this issue 3 years ago • 0 comments

Reproducible in vscode.dev or in VS Code Desktop?

  • [X] 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.

Screenshot 2022-06-09 at 4 15 53 PM

Aayush04 avatar Jun 09 '22 10:06 Aayush04