diff --git a/addons/addon-fit/src/FitAddon.ts b/addons/addon-fit/src/FitAddon.ts index a282ed3f8c..35588a4cc1 100644 --- a/addons/addon-fit/src/FitAddon.ts +++ b/addons/addon-fit/src/FitAddon.ts @@ -25,6 +25,8 @@ const MINIMUM_ROWS = 1; export class FitAddon implements ITerminalAddon , IFitApi { private _terminal: Terminal | undefined; + private _lastAvailableHeight: number | undefined; + private _lastAvailableWidth: number | undefined; public activate(terminal: Terminal): void { this._terminal = terminal; @@ -45,6 +47,11 @@ export class FitAddon implements ITerminalAddon , IFitApi { if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) { core._renderService.clear(); this._terminal.resize(dims.cols, dims.rows); + // Fill in less than one row + if (this._lastAvailableHeight && this._lastAvailableWidth && this._terminal.screenElement) { + this._terminal.screenElement.style.width = `${this._lastAvailableWidth}px`; + this._terminal.screenElement.style.height = `${this._lastAvailableHeight}px`; + } } } @@ -83,6 +90,8 @@ export class FitAddon implements ITerminalAddon , IFitApi { const elementPaddingHor = elementPadding.right + elementPadding.left; const availableHeight = parentElementHeight - elementPaddingVer; const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth; + this._lastAvailableHeight = availableHeight; + this._lastAvailableWidth = availableWidth; const geometry = { cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)), rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)) diff --git a/src/browser/public/Terminal.ts b/src/browser/public/Terminal.ts index 3b4309437f..3b004fa017 100644 --- a/src/browser/public/Terminal.ts +++ b/src/browser/public/Terminal.ts @@ -82,6 +82,7 @@ export class Terminal extends Disposable implements ITerminalApi { public get onWriteParsed(): Event { return this._core.onWriteParsed; } public get element(): HTMLElement | undefined { return this._core.element; } + public get screenElement(): HTMLElement | undefined { return this._core.screenElement; } public get parser(): IParser { if (!this._parser) { this._parser = new ParserApi(this._core); diff --git a/test/playwright/TestUtils.ts b/test/playwright/TestUtils.ts index dea3fcc71f..589e4db46f 100644 --- a/test/playwright/TestUtils.ts +++ b/test/playwright/TestUtils.ts @@ -117,6 +117,7 @@ type TerminalProxyAsyncMethodOverrides = 'hasSelection' | 'getSelection' | 'getS type TerminalProxyCustomOverrides = 'buffer' | ( // The below are not implemented yet 'element' | + 'screenElement' | 'textarea' | 'markers' | 'unicode' | diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 15a0332789..fd8e4f95e1 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -835,6 +835,11 @@ declare module '@xterm/xterm' { */ readonly element: HTMLElement | undefined; + /** + * The element is a screen container. + */ + readonly screenElement: HTMLElement | undefined; + /** * The textarea that accepts input for the terminal. */