3

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?

Ale
  • 917
  • 9
  • 28

5 Answers5

3

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;
}
*/
SherylHohman
  • 16,580
  • 17
  • 88
  • 94
pikiok
  • 31
  • 1
2

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>"))
rishi jain
  • 1,524
  • 1
  • 19
  • 26
  • Thank you! It's a good workaround to solve the problem of overlapping with the table of contents but still I think there's something wrong with the theme. Also, do you know how to revert it to default? – Ale Jun 20 '20 at 18:06
  • when Jupyter note is started, don't run the above command and it will return to normal. 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)` – rishi jain Jun 21 '20 at 16:59
  • @Ale - once you restart Jupyter notebook, don't use width:70%. Use the code instead. %matplotlib inline; pd.set_option('display.max_columns', None); pd.set_option('display.max_rows', 100) – rishi jain Aug 16 '20 at 04:40
  • I ran your code above but nothing changes. Could you please unify your two answers? It wold be easier to follow – Ale Aug 16 '20 at 09:56
0

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)
rishi jain
  • 1,524
  • 1
  • 19
  • 26
  • Thank you, I get this workaround but I still would like to have the situation of the second picture with the `oceans16` theme. I mean I don't want to move it, just to fix it above the code/contents part of the window – Ale Aug 14 '20 at 20:12
0

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.

Chinnaporn Chinotaikul
  • 1
  • 1
0

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!

shazib77
  • 1
  • 1