How can I eliminate the gray border around Jupyter/ipython notebooks in my browser?

Viewed 9060

I read in this thread how to change the cell width for Jupyter notebooks (I used the second answer to do so dynamically). This method eliminates the left-right gray borders.

However, this still leaves a gray border at the top and bottom of the document. How can I also remove that, so that the cells are lying on a clean slate?

4 Answers

Experimenting with some of the suggestions and deploying firebug, here are the changes I made to maximize the working space. Using width css attribute didn't work for me since I occasionally use the table of contents plugin and setting width messes things up.

Notebook css overrides

Add the following css to ~/.jupyter/custom/custom.css:

/* Modifications to notebook layout to maximize working space */

/* maximize working space */
#notebook {
    padding: 5px 0 5px 0 !important;
}

/* eliminate most of bottom gray */
.end_space {
    min-height: 5px !important;
}

/* reduce white padding on the outside of the notebook */
#notebook-container {
    padding: 5px;
}

/* less padding in sub-cells on the left with In[] */
.run_this_cell {
    padding-left: 0px;
    padding-right: 0px;
}

Of course if you already had something inside that file, you will need to merge the previous settings with this one.

You may need to restart jupyter if I haven't already had custom.css in place.

Minimizing the impact of the Table of Contents plugin.

At the moment of this writing this plugin forces a thick grey margin on both sides of the main notebook's body. I requested to make the margin variable configurable. Until this is implemented (if ever), i did:

cd ~/.local/share/jupyter/nbextensions
patch -p0 < margin-width.patch

where margin-width.patch contains:

--- toc2/toc2.js        2018-07-06 15:00:27.139881888 -0700
+++ toc2/toc2.js.fixed  2018-07-06 15:00:36.359743263 -0700
@@ -224,7 +224,7 @@
     }

     function setNotebookWidth(cfg, st) {
-        var margin = 20;
+        var margin = 5;
         var nb_inner = $('#notebook-container');
         var nb_wrap_w = $('#notebook').width();
         var sidebar = $('#toc-wrapper');

You don't need to restart jupyter for this change to take effect.

Outcome

Now I get all of the available space nicely utilized without it being too tight:

Snapshot of the notebook after removing wasted grey/white space

I came here because I wanted to remove the cell border when it's selected. I hope this would be useful for someone else.

from IPython.core.display import display, HTML
display(HTML(
    '<style>'
        'div.cell.selected {border: None;}'
    '</style>'
))
Related