Text overflows parameter info widget

joechung-msft commented 6 years ago

monaco-editor version: 0.10.0 or later (including 0.13.1) Browser: Edge, Firefox OS: Windows 10 Steps or JS usage snippet reproducing the issue:

Create a Web page with a narrow editor, e.g.,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        #app {
            border: 1px solid grey;
            height: 400px;
            width: 240px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/monaco-editor@0.10.0/min/vs/loader.js"></script>
    <script>
        require.config({
            paths: {
                'vs': 'https://unpkg.com/monaco-editor@0.10.0/min/vs'
            }
        });

        require(['vs/editor/editor.main'], function () {
            var editor = monaco.editor.create(
                document.getElementById('app'),
                {
                    language: 'javascript',
                    value: [
                        'function x() {',
                        '\tconsole.log("Hello, world!");',
                        '}'
                    ].join('\n')
                })
        });
    </script>
</body>
</html>

When viewing this page with the browser also sized to be narrow, the text overflows the bounds of the parameter info widget.

monaco-editor-edge-bug

NOTE: This also happens if the fixedOverlayWidgets option is set to true.

joechung-msft commented 6 years ago

I corrected the 'vs' import in the repro. Apologies.

joechung-msft commented 6 years ago

Adding an overflow-y: auto setting to the parameter-hints-widget CSS class results in this on Edge:

I don't know if you would consider that an acceptable fix, but that's what we wound up doing as a mitigation.

alexdima commented 6 years ago

@joaomoreno Would adding overflow-y: auto to the widget hurt VS Code in any way ? Would you take a PR for that ?

joaomoreno commented 6 years ago

The question is why aren't the scrollbars working in the standalone editor. In VS Code we get our scrollbars:

screenshot from 2018-08-07 12-08-33

I'd make our scrollbars work instead of having the browser scrollbars.

joechung-msft commented 6 years ago

If I add a max-height: 250px on the .wrapper class, I see the custom scrollbars:

250px is the max-height set on the .wrapper DIV's parent element (.editor-widget parameter-hint-widget).

Firefox has the same issue, and applying the max-height also makes the custom scrollbars visible (without the horizontal scrollbar even):

joaomoreno commented 6 years ago

Yeah something's off in Edge's layout code... Chrome and FF seem OK in Windows.

https://codepen.io/anon/pen/BPqNNz

joechung-msft commented 6 years ago

The fixedOverflowWidgets setting works in 0.14.3 and works around this issue so this is only an issue when that setting is false (its default value).

joechung-msft commented 5 years ago

Any progress to report on this issue?

joechung-msft commented 2 years ago

Good news! This does not repro in Firefox on Windows 11 using the most recent version of monaco-editor.

Given non-Chromium Edge's deprecated state, I'm going to close this.

microsoft / monaco-editor

Text overflows parameter info widget #810