575

I would like to increase the width of the ipython notebook in my browser. I have a high-resolution screen, and I would like to expand the cell width/size to make use of this extra space.

Improve this question
5
  • 1
    Is there a way apply the new witdth to the output formatting? If I use print(...) to output a matrix or a list, the line break still occures at the same position and therefor the output is not using the added space. Commented Sep 19, 2017 at 15:12
  • 1
    Try np.set_printoptions(250) Commented Sep 19, 2017 at 15:14
  • 3
    Thanks! np.set_printoptions(linewidth=110) works for me. Commented Sep 19, 2017 at 15:18
  • 1
    @vgoklani Sorry, but 'np' ? Where does that come from? Commented Oct 31, 2017 at 9:24
  • 1
    @Brandt import numpy as np Commented Oct 31, 2017 at 12:20

17 Answers 17

Reset to default
1074

If you don't want to change your default settings, and you only want to change the width of the current notebook you're working on, you can enter the following into a cell:

from IPython.display import display, HTML display(HTML("<style>.container { width:100% !important; }</style>"))
Improve this answer
Sign up to request clarification or add additional context in comments.

21 Comments

Nice. This looks like it only changes the code/markdown cells. Is there a way to also have it do the output cells?
This solution worked for me ! I did not have to install any lib or package to use it.
@becko according to julia discourse this works: display("text/html", "<style>.container { width:100% !important; }</style>")
Holly Molly this has changed my life to a better... Thank you so much!!! Been so tired of looking into that screwed 600px width box while having a 2k 30'' monitor!!
add display(HTML("<style>.output_result { max-width:100% !important; }</style>")) to change the output cells width!
|
255

That div.cell solution didn't actually work on my IPython, however luckily someone suggested a working solution for new IPythons:

Create a file ~/.ipython/profile_default/static/custom/custom.css (iPython) or ~/.jupyter/custom/custom.css (Jupyter) with content

.container { width:100% !important; }

Then restart iPython/Jupyter notebooks. Note that this will affect all notebooks.

Improve this answer

16 Comments

These little snippets of information should be posted some place, thanks again!
Starting IPython 4.1 custom folder location has changed to ~/.jupyter/custom/.
I had to restart Jupyter notebook (4.1.0) for it to work. I put the above css in ~/.jupyter/custom/custom.css
100% doesn't look very nice, I changed it to 90%
If this isn't working after restarting the notebook, try restarting your browser, and still if not, try clearing cookies. That worked for me!
|
89

To get this to work with jupyter (version 4.0.6) I created ~/.jupyter/custom/custom.css containing:

/* Make the notebook cells take almost all available width */ .container { width: 99% !important; } /* Prevent the edit cell highlight box from getting clipped; * important so that it also works when cell is in edit mode*/ div.cell.selected { border-left-width: 1px !important; }
Improve this answer

5 Comments

This works in Linux! But where do I need to save it in Windows?
Try running jupyter --config-dir, then create custom\custom.css in whatever location that command returns.
@jvd10 this did not work for me. Does custom.css have any other code besides the snippet above? Also how does Jupyter know to use it?
On linux and osx at least, by default jupyter looks for a hidden directory called .jupyter for configuration files including customizations like the above. The above should be the only contents of the custom.css. See here for some more info: jupyter.readthedocs.io/en/latest/projects/…
The .container doesn't work with the version i have installed. This worked instead: .jp-Cell { width: 99% !important; }
57

For notebook 7 you can use:

from IPython.display import display, HTML display(HTML("<style>:root { --jp-notebook-max-width: 100% !important; }</style>"))
Improve this answer

9 Comments

thans this works -- but if we want to change it permanently , adding code into ~/.jupyter/custom/custom.css, :root { --jp-notebook-max-width: 100% !important; } is not working :/ ...any idea? thanks
github.com/jupyter/notebook/discussions/7152
Thanks, the most upvoted answer didn't work, this one did. No idea why this isn't the default.
Thank you, this worked for me in JupyterLab. The most upvoted answer did not.
The accepted answer stopped working for me in v7, but this worked like a charm. Thanks!
|
34

It's time to use jupyterlab

Finally, a much-needed upgrade has come to notebooks. By default, Jupyter-lab uses the full width of your window, just like any other full-fledged native IDE (no tweaking needed).

You can install it either by pip or conda.

# Option 1: using pip pip install jupyterlab # Option 2: using conda conda install -c conda-forge jupyterlab

To launch, just replace noteboook with lab

jupyter lab # instead of "jupyter notebook"

Here is a screenshot from blog.Jupyter.org

Improve this answer

15 Comments

JupyterLab is still in beta and has some regressions from the regular notebooks (by design). One notable is is forbidding JS by default and needing extensions for every little JS visualisation
And how can you change the width of a Jupyter Lab cell?
I've struggled for an hour making jupyter lab to work. at first no graphics (pyplot / plotly) was showing. The docs don't mention you must install extensions for that. Tried to install the plotly extension. found out you need nodejs for that. installed both, now I get "Cannot find template: "index.html"" message. At this point I gave up, I'm staying with jupyter notebook.
Every 6 months I try jupyter lab and it just does not work well.
@CiprianTomoiagă JS execution is no longer forbidden in JupyterLab (for quite a while now actually).
|
28

What I do usually after new installation is to modify the main css file where all visual styles are stored. I use Miniconda but location is similar with others C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

With some screens these resolutions are different and more than 1. To be on the safe side I change all to 98% so if I disconnect from my external screens on my laptop I still have 98% screen width.

Then just replace 1140px with 98% of the screen width. 

@media (min-width: 1200px) { .container { width: 1140px; } }

enter image description here

After editing

@media (min-width: 1200px) { .container { width: 98%; } }

enter image description here Save and restart your notebook

Update

Recently had to wider Jupyter cells on an environment it is installed, which led me to come back here and remind myself.

If you need to do it in virtual env you installed jupyter on. You can find the css file in this subdir

env/lib/python3.6/site-packages/notebook/static/style/stye.min.css
Improve this answer

4 Comments

This is awesome! It's simple and accomplishes exactly what is needed.
@Gunay /notebook does not exist in the directory for me.
Do you know the version of your python (python -V when you activate your environment) and how did you create the virtual env? Did you use venv module on Python/Conda?
If I could give you 10 likes, I would. Brilliant!
17

This is the code I ended up using. It stretches input & output cells to the left and right. Note that the input/output number indication will be gone:

from IPython.core.display import display, HTML display(HTML("<style>.container { width:100% !important; }</style>")) display(HTML("<style>.output_result { max-width:100% !important; }</style>")) display(HTML("<style>.prompt { display:none !important; }</style>"))
Improve this answer

1 Comment

cool! I would only exclude the last line since it makes the cells execution information go away(cells left part, that shows the excecution order and an * when execution is not finished yet)
14

You can set the CSS of a notebook by calling a stylesheet from any cell. As an example, take a look at the 12 Steps to Navier Stokes course.

In particular, creating a file containing

<style> div.cell{ width:100%; margin-left:1%; margin-right:auto; } </style>

should give you a starting point. However, it may be necessary to also adjust e.g div.text_cell_render to deal with markdown as well as code cells.

If that file is custom.css then add a cell containing:

from IPython.core.display import HTML def css_styling(): styles = open("custom.css", "r").read() return HTML(styles) css_styling()

This will apply all the stylings, and, in particular, change the cell width.

Improve this answer

2 Comments

This doens't work in the latest IPython (version > 2). Check this answer: stackoverflow.com/a/24207353/2108548
Or if you just want to change it for the current notebook in recent ipythons and jupyter, see @jjinking's answer :)
10

(As of 2018, I would advise trying out JupyterHub/JupyterLab. It uses the full width of the monitor. If this is not an option, maybe since you are using one of the cloud-based Jupyter-as-a-service providers, keep reading)

(Stylish is accused of stealing user data, I have moved on to using Stylus plugin instead)

I recommend using Stylish Browser Plugin. This way you can override css for all notebooks, without adding any code to notebooks. We don't like to change configuration in .ipython/profile_default, since we are running a shared Jupyter server for the whole team and width is a user preference.

I made a style specifically for vertically-oriented high-res screens, that makes cells wider and adds a bit of empty-space in the bottom, so you can position the last cell in the centre of the screen. https://userstyles.org/styles/131230/jupyter-wide You can, of course, modify my css to your liking, if you have a different layout, or you don't want extra empty-space in the end.

Last but not least, Stylish is a great tool to have in your toolset, since you can easily customise other sites/tools to your liking (e.g. Jira, Podio, Slack, etc.)

@media (min-width: 1140px) { .container { width: 1130px; } } .end_space { height: 800px; }
Improve this answer

2 Comments

yes, Stylish is great! Can you please add the code needed for the extra space at the bottom ? I always have an empty cell with lots of blank lines in order to have the real last cell centred -_- .
Stylish was taken down yesterday for stealing users' browsing history: gadgets.ndtv.com/internet/news/…
8

2024 Jupyter Notebook v.7

  1. get your config location, in terminal type: jupyter --paths

example result:

config: /Users/USERNAME/.jupyter

  1. create "custom" folder: mkdir -pv ~/.jupyter/custom/

  2. create "custom.css" file: touch ~/.jupyter/custom/custom.css

  3. open "custom" folder: open ~/.jupyter/custom/

  4. write this line to the "custom.css" file: .jp-WindowedPanel-outer {padding:0 !important;}

  5. Refresh your jupyter browser tab: CMD+R

"~" and "/Users/USERNAME/" are usually interchangeable

Improve this answer

2 Comments

A new addition to Jupyter Notebook v 7.3 and above builds in a toggle under the 'View' to do this without need to fuss with this. See under 'Full Width Notebook' here. Go to 'View' button and click on 'Enable Full Width Notebook' as pointed out elsewhere in this thread by user_jr.
That's why should we upvote user_js's answer stackoverflow.com/a/79417931/813946
6

For Chrome users, I recommend Stylebot, which will let you override any CSS on any page, also let you search and install other share custom CSS. However, for our purpose we don't need any advance theme. Open Stylebot, change to Edit CSS. Jupyter captures some keystrokes, so you will not be able to type the code below in. Just copy and paste, or just your editor:

#notebook-container.container { width: 90%; }

Change the width as you like, I find 90% looks nicer than 100%. But it is totally up to your eye.

Improve this answer

2 Comments

Awesome suggestion for jupyter notebook but does so much more!
@bizi, do I click inside a code cell and then right click, select Stylebot, edit CSS and copy and paste what you have? If so, it did not work for me. I just got fatter margins on both sides.
4

Note that if you do this the old way, you'll now get a deprecation warning. This uses the newer submodule naming:

from IPython.display import HTML HTML("<style>.container { width:100% !important; }</style>")
Improve this answer

1 Comment

This code will work for the current notebook only. How to do it for all notebooks?
3

I made some modification to @jvd10's solution. The '!important' seems too strong that the container doesn't adapt well when TOC sidebar is displayed. I removed it and added 'min-width' to limit the minimal width.

Here is my .juyputer/custom/custom.css:

/* Make the notebook cells take almost all available width and limit minimal width to 1110px */ .container { width: 99%; min-width: 1110px; } /* Prevent the edit cell highlight box from getting clipped; * important so that it also works when cell is in edit mode*/ div.cell.selected { border-left-width: 1px; }
Improve this answer

Comments

3

In Jupyter Notebook version 7.3 and above, the option Enable Full Width Notebook is available.

View → ✓ Enable Full Width Notebook

This will increase the width of the input and output cells. the width of the filemanager remains same. After that the cells look like this:

full width notebook.

Improve this answer

4 Comments

My notebook version is 7.3.2. Just add the picture above in my answer. The file manager stays in original width.
It's a new addition to Jupyter Notebook 7.3 and above. See under 'Full Width Notebook' here. Please add some variation of this information to your answer, please. The version information is important as a lot of the posts in this thread are outdated.
I'm having a heckuva time getting 7.3 to install and run. It's there in my pip freeze, but when I try to run jupyter notebook I still get 7.2.2. Also tried installing with uv, and running into weird resolution issues there. Does 7.3 have very strict python version requirements? I can't find them listed anywhere.
It should be THE answer right now. It worked for me with 7.3.3. In file list mode this option is grey but I don't care too much.
1

I tried everything and nothing worked for me, I ended up using displaying my data frame as HTML as follows

from IPython.display import HTML HTML (pd.to_html())
Improve this answer

Comments

0

For Firefox/Chrome users, a nice way to achieve 100% width is to use a custom TamperMonkey script.

The benefits are

  1. configure this once in your browser, no need to modify the server configuration.
  2. works with multiple jupyter servers.
  3. TamperMonkey is trusted, maintained, and stable.
  4. Lots of additional customization is possible via javascript.

This script works for me https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js

Improve this answer

Comments

0

adding to answers by @jdv10 and @gerenuk

The best option is to add and tweak the custom.css file. Below I am sharing my CSS file contents which I use to squeeze out the maximum screen area in a Jupyter Notebook.

Since it targets the vanilla CSS codes of the rendered page, it is supposed to work for all types of language used for coding on the Notebook.

/* Notebook styling */ body, p, div.rendered_html { color: #93a1a1; font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif; font-size: 11pt; } body { background-color: #eee8d5 !important; } /* the following controls aspects which are around the cells */ #notebook { background-color: #073642 !important; box-shadow: inset 20px 36px 20px -35px black !important; margin: 1px !important; padding: 1px !important; } #notebook-container { padding: 2px !important; } /* Make the notebook cells take almost all available width */ .container { width:99.5% !important; /*margin:.5% !important;*/ /*color: #93a1a1 !important;*/ color: black !important; background-color: lightblue !important; } /* Cell output */ .rendered_html pre, .rendered_html code { color: inherit !important; background-color: inherit !important; } .rendered_html table, .rendered_html td, .rendered_html th { border: 1px solid #586e75 !important; } div.cell { width:100% !important; margin: 5px !important; /* margin-left:2px !important; */ /* margin-right:2px !important; */ padding: 2px !important; /* the following overrides the background color of the input area */ /* background-color: yellow !important; */ /* border-color: black !important; */ } /* Prevent the edit cell highlight box from getting clipped; * important so that it also works when cell is in edit mode*/ div.cell.selected { border-left-width: 5px !important; border-right-width: 1px !important; border-top-width: 2px !important; border-bottom-width: 2px !important; border-color: red !important; } /*this is for the area to the left of the editor or input area*/ div.run_this_cell { width: auto !important; color: green !important; padding: 0 !important; padding-top: 5px !important; padding-left: 5px !important; font-weight: bold !important; font: 2em sans-serif; } div.input_area { border-color: green !important; background-color: #ffffdd !important; } .prompt { line-height: 1em !important; } div.prompt { min-width: auto; background-color: white; } div.input_prompt { color: #268bd2 !important; color: #000000 !important; font-weight: bold !important; border: 1px solid #ff9900 !important; background-color: greenyellow; padding-right: 0px !important; text-align: center !important; width: auto !important; font-size: 10px !important; } div.output_area { color: #000000 !important; background-color: #e2e2ff !important; font-size: 0.9em !important; } /* Syntax highlighting */ .cm-s-ipython span.cm-comment { /*color: #6c71c4 !important;*/ color: midnightblue !important; color: rgb(100, 100, 170) !important; font-style: italic !important; } .cm-s-ipython span.cm-string { color: rgb(100, 20, 29) !important; }

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.