xterm.js
xterm.js copied to clipboard
Published
20 hours ago •
xtermjs
xtermjs
fit addon resizes irratically moving up and down
Upon a resize event, calling fit(), the width does not remain constant when resizing vertically. This results in strange scroll bar positioning, sometimes obstructed, and incomplete fill of the parent control.
Details
- Browser and browser version: Chrome 1.63.2
- OS version: Ubuntu 20.04
- xterm.js version: 4.15.0 / fit 0.5.0
Steps to reproduce
- See below for page script
- Load the page in Chrome. Make the browser resizable and grab the window edge and shrink or expand the vertical size
Result: the width of the terminal changes, when only the height is supposed to change
The problem appears to be in what xterm resize is doing.
Page script
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script type="text/javascript" src="node_modules/xterm/lib/xterm.js"></script>
<script type="text/javascript" src="node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
</head>
<body>
<div id="panes" class="panes">
<div id="terminal-pane" class="terminal-pane"></div>
<div id="sidebar-pane" class="sidebar-pane"></div>
</div>
<script>
var pane = document.getElementById('terminal-pane');
var fitAddon = new FitAddon.FitAddon();
var term = new Terminal();
term.loadAddon(fitAddon);
term.open(pane);
function onSize() {
fitAddon.fit(); // note: fitAddon.proposeDimensions() only will produce the correct result
}
onSize();
window.addEventListener('resize', onSize, false);
</script>
<style>
html, body {
height: 100%;
margin: 0;
}
div.panes {
width: 100%;
height: 100%;
display: flex;
}
div.terminal-pane {
flex: 70%;
overflow: visible;
background-color: red;
}
div.sidebar-pane {
flex: 30%;
}
</style>
</body>
</html>
#3564 is related, but this issue is different. The irratic up/down issue reproduces even after adding a hack workaround for 3564 bug of viewport not updated:
var fitAddon = new FitAddon.FitAddon();
var pane = document.getElementById('terminal-pane');
var screen;
var viewport;
var scrollArea;
setTimeout(() => {
// create the terminal after flex has computed the panes
var term = new Terminal();
term.loadAddon(fitAddon);
term.open(pane);
// workaround for scrollbar resize bugs
screen = document.getElementsByClassName("xterm-screen")[0]
viewport = document.getElementsByClassName("xterm-viewport")[0]
scrollArea = document.getElementsByClassName("xterm-scroll-area")[0]
onSize();
window.addEventListener('resize', onSize, false);
...
}
function onSize() {
// workaround for scrollbar resize bugs
screen.style.height = pane.clientHeight + 'px';
viewport.style.height = pane.clientHeight + 'px';
scrollArea.style.height = screen.style.height;
fitAddon.fit();
viewport.style.width = (screen.clientWidth + scrollbarWidth) + 'px';
}