area/addon/fithelp wantedtype/bug
Repository metrics
- Stars
- (16,196 stars)
- PR merge metrics
- (Avg merge 2d 10h) (16 merged PRs in 30d)
Description
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>