Fix jupyter notebook toolbar with jupyterthemes and table of contents

Question

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:

This stops once I revert to default

!jt -r

as you can see from here:

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

Answer 1

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>"))

Answer 2

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)

Answer 3

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.

Answer 4

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;
}
*/

Answer 5

The answer by Chinnaporn Chinotaikul works perfectly but as I have no reputation on stackoverflow I can't comment/edit.

My contribution is that in Windows, instead of the ~/.jupyter/custom directory you will have to find custom.css in the C:\Users\[Username]\.jupyter\custom directory. I did the following commenting out:

div#maintoolbar {
/*position: absolute;*/
 width: 90%;
 margin-left: -10%;
 padding-right: 8%;
 float: left;
 background: transparent !important;
}

Refresh the notebook you are using at the moment and the new stylesheet commands will apply (save your work before doing that).

Example of Change in Jupyter Theme after CSS edit

Thank you!

Answer 6

I think this is an easier fix than changing the source files. Under the table of contents settings find the option "Move notebook's title and menu on the left instead of being centered -- This provides a better look when the toc/sidebar is present" and unselect it. This will fix display overlap (see example in image)

enter image description here