Cropped hover markdown description using Monaco

Question

Using Firefox and the Angular wrapper for Monaco, I get this behaviour :

The content is not displayed properly : it is cropped by the parent component. How should I handle this case ? I registred the suggestion using the following code :

monaco.languages.registerHoverProvider(this.language, {
      provideHover: function (model: any, position: any) {

        const word = model.getWordAtPosition(position);
        if (!word) return;

        const info = suggestionsFromApi.filter(item => item.label === word.word)[0];

        if (info) {
          let documentationContent = []
          documentationContent = info.documentationMarkdownArray.map(item => ({value: item}));
          return {
            range: new monaco.Range(
              position.lineNumber,
              word.startColumn,
              position.lineNumber,
              word.endColumn
            ),
            contents: documentationContent
          };
        }
        return null;
      }
    });

I found out that using position: absolute on the editor allow me visualise the help hover, but I cannot use this settings because it breaks all the content.

Answer 1

The solution is to add this to the editor options :

      fixedOverflowWidgets: true,

https://microsoft.github.io/monaco-editor/typedoc/enums/editor.EditorOption.html#fixedOverflowWidgets