The "Command Palette" overlay widget does not display in small (height) editors (with how to hack)

[AndersMad]

The "Command Palette" overlay widget is restricted in height and overflow by the overflow-guard container - so it does not display (or badly) in editors with small height. The e.g. completion widget does display outside the editor.

Dirty Hack (after editor creation):

let view = (editor as any)._view;
let overlayWidgets = view.overlayWidgets;
let contentWidgets = view.contentWidgets;

overlayWidgets.__addWidget = overlayWidgets.addWidget as any;
overlayWidgets.addWidget = function (widget: any /* IOverlayWidget */) {
    overlayWidgets.__addWidget(widget);
    if (widget.getId() == "editor.contrib.quickOpenEditorWidget") {
        let domNode = widget.getDomNode();
        domNode.parentNode.removeChild(domNode);
        contentWidgets.overflowingContentWidgetsDomNode.appendChild(domNode);
    }
}

I could not find a sane change in the vscode source to make an easy change for this (to my current knowledge having toyed with the editor for a shorter while)

[tomshen]

Another dirty hack (though this may already be fixed in latest monaco-editor):

.monaco-editor .quick-open-tree {
    min-height: 40px;
}

[chadsowald]

Any new ideas on this bug? I'm also encountering this. I have a single line editor that can grow. Even in that single line view, I would like the quick suggestions and its auto-complete to show/work. The code hack that @tomshen suggested in 2016 no longer seems to work and the more recent CSS hack works if I make my single line editor more like 4 or 5 lines, but still doesn't work for single line.

[AndersMad]

@chadsowald in my initial comment I wrote a hack that still works - but yes, a "fix" would be nice in the core.. also more BEM naming on the CSS pref. with a namespace on it e.g. vscode- or monaco-

[AndersMad]

So after the 0.21 release my hack no longer works - this is the new hack:

const domNode = editor.getContribution<any>('editor.controller.quickInput').widget.domNode;
(editor as any)._modelData.view._contentWidgets.overflowingContentWidgetsDomNode.domNode.appendChild(domNode.parentNode.removeChild(domNode));
let module = require("vs/base/parts/quickinput/browser/quickInputList");
module.QuickInputList.prototype.layout = function (maxHeight : number) {
	this.list.getHTMLElement().style.maxHeight = maxHeight < 200 ? "200px" : Math.floor(maxHeight) + "px";
	this.list.layout();
}

Dirty I know - but hope it helps & for a nice std. editor option someday :)