Xterm not working with Bootstrap Nav Tabs

Question

I'm trying to get xterm to work in my electron one page app. My problem is the div element for xterm is in another tab and not visible at startup/init. If the app started and I click on the nav tab for my xterm div element, its just a small black box without any output.

If I'm starting my app without loading the bootstrap.css it works and I can see my output in the xterm div element. But with the problem not having any bootstrap features.

How can I solve this problem?

Answer 1

I found a solution for my problem. I don't initialize xterm directly after my app starts. I will wait until the user clicks on the "Nav Tab" with the terminal in it and initialize xterm after it.

$('a[data-toggle="tab"]').on('shown.bs.tab', (e) => {
    if (/#MyTabID/gi.test(e.target.href) && this.MySshObjRef === null) {
        this.initMySshObj()
    }
})