xterm.js: xterm-addon-fit Shrinking the screen doesn't work

Details

Browser and browser version: chrome/版本 96.0.4664.55（正式版本） (arm64)
OS version: macos 12.0.1 (21A559)
xterm.js version: 4.0.5
xterm-addon-fit: 0.5.0

Steps to reproduce

xterm-addon-fit 扩大屏幕时好使，缩小屏幕时不好使

initTerm() {
      const term = new Terminal(this.option)
      this.fitAddon = new FitAddon()
      term.loadAddon(this.fitAddon)
      term.open(this.$refs.terminal)
      term.write(this.initText)
      this.fitAddon.fit()

      return term
    },
 onResize: debounce(function () {
      console.warn('resize')
      this.fitAddon.fit()
    }, 0),
    onTerminalResize() {
      window.addEventListener('resize', this.onResize)
      this.term.onResize(this.resizeRemoteTerminal)
    },
    removeResizeListener() {
      window.removeEventListener('resize', this.onResize)
    },

aaa

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (3 by maintainers)

Commits related to this issue

Fix xterm-addon-fit Shrinking the screen doesn't work https://github.com/xtermjs/xterm.js/issues/3564#issuecomment-1004417440 — committed to zongou/go-ttyd by zongou a year ago

Most upvoted comments

I got the same problem. But i found this way, it’s work for me :

<div class="terminal-container">
    <div id="terminal"></div>
</div>

import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
const term = new Terminal(...);

const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.querySelector("#terminal"));
fitAddon.fit();

window.onresize = function () {
    fitAddon.fit();
};

.terminal-container{
    /* this is important */
    overflow: hidden;
}
.xterm .xterm-viewport {
    /* see : https://github.com/xtermjs/xterm.js/issues/3564#issuecomment-1004417440 */
    width: initial !important;
}

enncy on Mar 4, 2022