FitAddon resizes incorrectly

[SquitchYT]

Details

• Browser and browser version: WebKit
• OS version: Linux
• xterm.js version: 5.3.0 (fitAddon: 0.8.0)

Steps to reproduce

let fitAddon = new FitAddon();
term.loadAddon(fitAddon);
fitAddon.fit();

The resized dimension do not take all the available space, instead, I need to use this code to use all the available space:

let fitAddon = new FitAddon();
term.loadAddon(fitAddon);
let proposedDimensions = fitAddon.proposeDimensions();
term.resize(proposedDimensions.cols + 1, proposedDimensions.rows + 1);

[bajrangCoder]

Yeah , i am also facing same

#4853

[tisilent]

~~@Tyriar Is it feasible to add autoResize as an option to FitAddin?~~

Wrong understanding.

[tisilent]

~~scrollbarWidth?~~ 😏

[akteigland]

I just ran into this. In my case I was calling fit before terminal.open() The following code works for me:

const terminal = new Terminal();
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(myHTMLRef);
fitAddon.fit();

[jerch]

Cant repro that.

Still there is a chance though, that dimension calc might have slightly changed due to #4366, which switched from float to integer measuring of the reference char for the cell dimension.

[tisilent]

I can repro ..........

[tisilent]

issue

@jerch height 100%, I'm not sure why it was resized, there's no additional code. Create a new tab, access the app, and this will happen. Refresh will work fine.

[jerch]

@tisilent As far as I see .fit() should not change pixel dimensions of the enclosing element at all. All it does - it calcs the maximum rows&cols still fitting into the given dimensions and alters the rows/cols values on the terminal object to those values. Then with the next render cycle it may draw more empty lines to the bottom (thats for the initial terminal state, where data does not fill up the rows yet). My guess here - the empty rows are in fact higher, than calculated by the fit addon. At least with the DOM renderer this may lead to a dimension increase. Is this from the demo page? With the DOM renderer?

[tisilent]

@jerch This is a small tool. It's using Dom renderer. Mainly after refreshing, it works normally. I suspect it may be related to the browser. Tomorrow I will go to that device to make a GIF.

[cx690]

same problem, look like term.resize bug, columns set 80 will be ok, set 90 will error.

[carolin-violet]

i use a setTimeout to resolve this problem,when i directly use proposeDimensions, it is undefined. i am confused

let fitAddon = new FitAddon();
term.loadAddon(fitAddon);
setTimeout(() => {
  let proposedDimensions = fitAddon.proposeDimensions();
  term.resize(proposedDimensions.cols + 1, proposedDimensions.rows + 1);
}, 2000)

[jerch]

@carolin-violet proposeDimensions is undefined if you try to call it before the terminal element has a DOM representation. Plz make sure to call it after calling Terminal.open(your_terminal_element). Beside preparing the terminal element itself, the open places several more elements into the DOM, that are needed for proper runtime size measuring. Without those, the measuring literally points into nothing.

[cx690]

This may be not a bug，you should tell the channel size info. then it will work. My project code is here (useResize).

// browser side
const terminal = new Terminal();
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(el);
fitAddon.fit();
const info = { width: el.offsetWidth, height: el.offsetHeight ,...fitAddon.proposeDimensions() } //size info

//node side
client.shell((err, channel)=>{
    channel.setWindow(info.rows, info.cols, info.height, info.width);//cols default 80, set size info
})

[tisilent]

In the new version of Chrome, my problem is no reproducing... chrome 123.0.6312.124