How can I eliminate the gray border around Jupyter/ipython notebooks in my browser?
Question:
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?
Answers:
I would add the following to my css
*{margin:0;
padding:0;
}
html, body, .container{
margin:0!important;
padding:0!important;
}
and that should get rid of the extra space at the top and bottom as well as the sides. If it’s a line you mean by a border, you could add border:0; into the html, body css
Update after seeing comment:
From your given solution, you can also do same with height (height:100%;!important) but in my experience setting 100% to the height property is not as effective as with width (as height is more dynamic) Try the html/body thing first.
example of inline style with html/body attributes:
from IPython.core.display import display, HTML
display(HTML("<style> *{margin:0; padding:0;} html, body, .container{margin:0;!important padding:0;!important} .container { width:100% !important;}</style>"))
Update 2022-10-04: Instead of the below, I recommend switching to jupyterlab, which has a much cleaner/more modern notebook display.
Update 2019-02-18:
Instead of the below, I recommend installing jupyterthemes. These notebook themes are beautiful, easy to use, and have no gray border.
Original Post:
So after using "Inspect Element" on a notebook and learning an iota of CSS, it seems the following will work
from IPython.core.display import display, HTML
display(HTML(
'<style>'
'#notebook { padding-top:0px !important; } '
'.container { width:100% !important; } '
'.end_space { min-height:0px !important; } '
'</style>'
))
where the top line removes the gray margin at the top, the middle line removes the side margins, and the bottom line removes the gray margin at the bottom.
The content in-between <style>, </style> can also be added to the custom.css file in ~/.jupyter/custom/ following this thread; my file contains the lines
/* Modifications to notebook format */
#notebook { padding-top:0px !important; } /* eliminate top gray */
.container { width:100% !important; } /* eliminate side gray */
.end_space { min-height:0px !important; } /* eliminate bottom gray */
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:
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>'
))
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?
I would add the following to my css
*{margin:0;
padding:0;
}
html, body, .container{
margin:0!important;
padding:0!important;
}
and that should get rid of the extra space at the top and bottom as well as the sides. If it’s a line you mean by a border, you could add border:0; into the html, body css
Update after seeing comment:
From your given solution, you can also do same with height (height:100%;!important) but in my experience setting 100% to the height property is not as effective as with width (as height is more dynamic) Try the html/body thing first.
example of inline style with html/body attributes:
from IPython.core.display import display, HTML
display(HTML("<style> *{margin:0; padding:0;} html, body, .container{margin:0;!important padding:0;!important} .container { width:100% !important;}</style>"))
Update 2022-10-04: Instead of the below, I recommend switching to jupyterlab, which has a much cleaner/more modern notebook display.
Update 2019-02-18:
Instead of the below, I recommend installing jupyterthemes. These notebook themes are beautiful, easy to use, and have no gray border.
Original Post:
So after using "Inspect Element" on a notebook and learning an iota of CSS, it seems the following will work
from IPython.core.display import display, HTML
display(HTML(
'<style>'
'#notebook { padding-top:0px !important; } '
'.container { width:100% !important; } '
'.end_space { min-height:0px !important; } '
'</style>'
))
where the top line removes the gray margin at the top, the middle line removes the side margins, and the bottom line removes the gray margin at the bottom.
The content in-between <style>, </style> can also be added to the custom.css file in ~/.jupyter/custom/ following this thread; my file contains the lines
/* Modifications to notebook format */
#notebook { padding-top:0px !important; } /* eliminate top gray */
.container { width:100% !important; } /* eliminate side gray */
.end_space { min-height:0px !important; } /* eliminate bottom gray */
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:
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>'
))