diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts index ea621daa17a0c..e86b39766fd42 100644 --- a/packages/monaco/src/browser/monaco-quick-input-service.ts +++ b/packages/monaco/src/browser/monaco-quick-input-service.ts @@ -15,11 +15,12 @@ // ***************************************************************************** import { + ApplicationShell, InputBox, InputOptions, KeybindingRegistry, PickOptions, QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem, QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator } from '@theia/core/lib/browser'; -import { injectable, inject } from '@theia/core/shared/inversify'; +import { injectable, inject, postConstruct } from '@theia/core/shared/inversify'; import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickInputButton, IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, QuickPickInput @@ -61,6 +62,9 @@ export class MonacoQuickInputImplementation implements IQuickInputService { controller: QuickInputController; quickAccess: IQuickAccessController; + @inject(ApplicationShell) + protected readonly shell: ApplicationShell; + @inject(VSCodeContextKeyService) protected readonly contextKeyService: VSCodeContextKeyService; @@ -77,6 +81,11 @@ export class MonacoQuickInputImplementation implements IQuickInputService { this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService)); } + @postConstruct() + protected init(): void { + this.shell.mainPanel.node.appendChild(this.container); + } + setContextKey(key: string | undefined): void { if (key) { this.contextKeyService.createKey(key, undefined); @@ -149,15 +158,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService { } private initContainer(): void { - const overlayWidgets = document.createElement('div'); - overlayWidgets.classList.add('quick-input-overlay'); - document.body.appendChild(overlayWidgets); - const container = this.container = document.createElement('quick-input-container'); - container.style.position = 'absolute'; - container.style.top = '0px'; - container.style.right = '50%'; - container.style.zIndex = '1000000'; - overlayWidgets.appendChild(container); + const container = this.container = document.createElement('div'); + container.id = 'quick-input-container'; } private initController(): void { diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css index 99489d6240fc4..5784aa7af18a8 100644 --- a/packages/monaco/src/browser/style/index.css +++ b/packages/monaco/src/browser/style/index.css @@ -4,6 +4,12 @@ font-size: inherit !important; } +#quick-input-container { + position: fixed; + right: 50%; + z-index: 1000000; +} + /* * set z-index to 0, so tabs are not above overlay widgets */