Monaco-editor: Text overflows parameter info widget

Created on 9 Apr 2018  路  8Comments  路  Source: microsoft/monaco-editor


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.,

````html











All 8 comments

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

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

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

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

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.

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

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):
image

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

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

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).

Any progress to report on this issue?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Kang-Jun-sik picture Kang-Jun-sik  路  3Comments

akosyakov picture akosyakov  路  3Comments

poloten4uk picture poloten4uk  路  3Comments

brandalorian picture brandalorian  路  3Comments

ststeiger picture ststeiger  路  3Comments