Auto scroll not working when viewport height is set

[twifty]

Details

• Browser and browser version: Chrome/Atom 1.18
• OS version: Manjaro
• xterm.js version: 2.9.2

Steps to reproduce

I'm trying to remove the half line gap below the viewport as described in #762. My method is to set the height on the viewport after an element resize event:

this.resizeObserver = new ResizeObserver(() => {
      this.terminal.fit()
      // fix the half row gap at bottom of terminal
      this.terminal.viewportElement.style.height = this.refs.xterm.clientHeight + 'px'
});
this.resizeObserver.observe(this.refs.xterm);

While this works, the side affect is when calling Terminal.write it no longer auto scrolls to the bottom.

Is there anything I can do to get the desired behaviour?

[Tyriar]

If you touch viewportElement, you're gonna have a bad time 😄

In VS Code I align the terminal to the bottom, rather than the top, that makes the padding move to the top which is less noticeable.

[twifty]

I figured as much. I'm also trying to align to the bottom but I can't for the life of me figure it out.

Due to the resizable nature of the panel, I have specified flex-grow: 1 on the outer container. Nothing I have tried so far (barring relative and absolute) will move the terminal bound element.

[Tyriar]

@twifty you can check this file out for what VS Code does https://github.com/Microsoft/vscode/blob/465c3ed79335a971cbce040f003d205a4c141e15/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css#L44

There's some flexbox as well as absolute positioning to the bottom, can't remember the exact reason for that.

[Tyriar]

Good luck 😃

[twifty]

Thanks, I finally figured it out though. Nested flexboxes. I had to display: flex on the terminal element then margin-top: auto on the viewport.