Notebook: Wrong terminal width on window start

[maver1ck]

Hi,
I have following issue.
When I'm opening terminal windows it's starting width is too low. (as on attached screen)

What could be wrong ?

[takluyver]

Is there anything in the browser's JS console when you do that?

[maver1ck]

Just: resize to : 36 rows by 40 columns / main.js:43

I found the reason of this behaviour. I have custom.css with this line:
.container { width:90% !important; }

[takluyver]

So if you take the custom CSS away, it works?

[maver1ck]

Yes.

But I'd like to have custom notebook width.

[takluyver]

Someone who's more familiar with the CSS layout (@Carreau?) can either tell you a better way to do that, or devise a better if there isn't currently one.

[Carreau]

.notebook_app .container {
    width:70%; !important
}

will target only the notebook page.

.terminal-app .container {
...
}

Will target only the terminal page (yeah for consistency, - vs _ )

[takluyver]

Thanks @Carreau !

[maver1ck]

Thanks. It works.
But how change width for terminal ? Is it possible ?

[takluyver]

Does the snippet @Carreau posted above not work?

[maver1ck]

When I added

.notebook_app .container {
    width:90%; !important
}

everything is OK.

After adding

.terminal-app .container {
    width:90%; !important
}

problem came back.

[takluyver]

I guess the 90% sizing is relative to something unexpected. Myeh, CSS.

[Carreau]

I guess the 90% sizing is relative to something unexpected. Myeh, CSS.

Ah, no my guess is he terminal is sized by JS (col times row):

So reduce the width of container -> reduce terminal size
reduce terminal size -> container have enough space to shrink
start looping until terminal get min width.

[takluyver]

The only thing more 'fun' than CSS is when your CSS is interacting with your javascript.

[maver1ck]

Is there any way to force resizing of terminal window from JS ?

[zxweed]

Does anybody found the solution for fix terminal width with custom container css?

[joshuria]

I'm using Chrome, and this is my solution:

jQuery(function() {
    if (typeof(terminal) === 'undefined')   return;
    function handler() {
        if (jQuery(terminal.term.viewportElement).is(':visible'))
            onresize();
        else
            setTimeout(handler, 1000);
    }
    setTimeout(handler, 1000);
});

Put this in .jupyter/custom/custom.js.