Xtermjs not rendering for large outputs

Question

I am using pusher and xtermjs. For small outputs for commands like w or free -m it works fine. For large outputs for commands ps -aux it doesnt work. The output is shown in the browser console but not in xtermjs output div.

Here is my pusher event handler.

    this.term = new Terminal({
      debug: true,
      allowTransparency: true,
      applicationCursor: true,
      applicationKeypad: true,
      normalFontWeight: 100,
      fontSize: 14,
      cursorBlink: true,
      cursorStyle: 'block', // “block” | “underline” | “bar” *
    })

    this.term.open(document.getElementById(this.outputDiv))
    this.term.fit()

    let screenObject = this
    let terminalObj = this.term
    window.UserChannel.bind('com.testing.command.result', function (data) {
      // console.log(data)
      let text = data.payload.replace(/\n/g, '\r\n')
      terminalObj.writeln(text)
      // terminalObj.fit()
      // screenObject.hideHelpers()
    })

Answer 1

The issue was with xterm-scroll-area. It was hiding data behind it. I had set style options as postion:absolute; z-index:0; and it worked.