Fix jupyter notebook toolbar with jupyterthemes and table of contents

user_5980655 0
Viewed 1394

I'm running a jupyter notebook after having changed the theme this way

!jt -t oceans16 -T -N -kl

Now the toolbar appears but it overlaps with the code and table of contents. If I scroll down the notebook it keeps hiding the first cells and the table of contents:

enter image description here

This stops once I revert to default

!jt -r

as you can see from here:

enter image description here

Is it a problem from my settings of jupytherthemes or in the table of content from nbextension?

jupyter-contrib-nbextensions jupyter jupyter-notebook
4 Answers

For me, the Table of contents and jupyter notebook is overlapping each other. For your case, try using the code below. You can play with 70% value to get perfect match for your screen.

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:70% !important; }</style>"))
user_34632970

Code in ~/.jupyter/custom/custom.css overwrites the default settings with those by jupyter themes.
The default jupyter settings don't have the overlapping toolbar problem.

The code section below seems to be causing the problem. Simply comment this section out as shown.

/* 
div#maintoolbar {
 position: absolute;
 width: 90%;
 margin-left: -10%;
 padding-right: 8%;
 float: left;
 background: transparent !important;
}
#maintoolbar {
 margin-bottom: -3px;
 margin-top: 0px;
 border: 0px;
 min-height: 27px;
 padding-top: 2px;
 padding-bottom: 0px;
}
#maintoolbar .container {
 width: 75%;
 margin-right: auto;
 margin-left: auto;
}
*/
user_155225500

The answer to - how to revert to normal. When Jupyter note is started, don't run the above command and it will return to normal. M

Moreover, you can run code like - display.max_columns to 'None' to run to default.

%matplotlib inline  
pd.set_option('display.max_columns', None)  
pd.set_option('display.max_rows', 100)
user_34632970

In your ~/.jupyter/custom folder, edit the custom.css file and remove the line: position:absolute; under div#maintoolbar {. This should set the toolbar to be the same as it is under the default Jupyter theme.

I also untick the options "Widen the display area to fit browser window" and "Move notebook's title and menu on the left instead of being centered" in the Nbextensions' Table of Contents options. Personally I find that gives me a better look when using Table of Contents with the toolbar.

user_149853810
Related