Cell container width as a percentage instead of a fixed size of 1140px

[dustyny]

While the fixed size works well on small screens like laptops, it wastes too much screen real estate on larger higher resolution displays. On a 27 inch, 4/5k display the majority of the screen is unused; yet you still have to scroll left and right to see the output of a cell (data table) or data visualizations are displayed in a smaller harder to read size.

I'd recommend changing the Cell's fixed size of 1140px to an adaptive display of 85%. This is the size I manually set every time I open a Notebook and it works very well.

# 1140px

# 85%

[szeitlin]

can you share the code you use to fix this? I'm having a miserable time with the broken scrollbar when trying to view dataframes with lots of columns, this would probably help.

[dustyny]

Sam,  I don’t have any code to share. I’ve looked around through the Notebook template but I can’t seem to find where they put that setting. That’s why I posted the suggestion.  Here’s my workaround though. I do this in Chrome but I’m sure you can figure out something similar in Firefox.  I right click the boarder of the DIV container that holds the cells and I select “Inspect Now”. Selec the the container div:  “notebook-container”.  In the Elements tab, on the right side under the Styles tab.  Under the @media section you will see “Width:” click that and change it to a percentage.  On Thu, Dec 08, 2016 at 3:57 PM Sam Zeitlin < mailto:Sam Zeitlin <[email protected]> > wrote: a, pre, code, a:link, body { word-wrap: break-word !important; } can you share the code you use to fix this? I'm having a miserable time with the broken scrollbar when trying to view dataframes with lots of columns, this would probably help. — You are receiving this because you authored the thread. Reply to this email directly, #1909 (comment) , or https://github.com/notifications/unsubscribe-auth/AHEqDSn--D7-Bpdp1Vy9_rdUKGNN_-n0ks5rGG9VgaJpZM4K27Ac .

[takluyver]

I suspect the 1140px width comes from somewhere in the Bootstrap styles, or something else we load from an external source, unfortunately. Our styles are written in a series of less files, which are then compiled to CSS, pulling in pieces from third party sources.

You can probably set a permanent override in ~/.jupyter/custom/custom.css. You might need a !important on it to force it to take precedence over other rules. The !important tag is a blunt instrument in CSS terms, so it might mess something else up a bit.

I'm not sure what the best default is here. For wrappable text, it's generally agreed that you want to limit the maximum width, because it's hard to read very long lines. E.g. Github issues is only taking ~1/3 the width of my screen for this comment, even on a laptop. But I can see that for things like large tables this is frustrating.

[szeitlin]

I ended up doing this:

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

[ellisonbg]

Tagging this with the JupyterLab milestone as this is already implemented there. We are not likely to change this in the classic notebook.

[ostrokach]

In case someone stumbles on this issue from google, the Table of Contents (2) nbextension already provides this feature, as long as you enable the option: "Widen the display area to fit the browser window (may be useful with sidebar option)".

[parrt]

The nbextension still leaves mucho left/right gutter. thanks for the hack. It's a pity about the two column format. It would be tricky to implement properly lining things up, but a two column format would be most useful so you could see all of your code on the left and output on the right. All of the visual difference tools have solved this but...

[cshuler]

I just copied and pasted this code into Jypyter, and now I do the same for every notebook I work on. You can fiddle with the percentages to change things around a bit.

from IPython.display import display, HTML

display(HTML(data="""

<style> div#notebook-container { width: 95%; } div#menubar-container { width: 85%; } div#maintoolbar-container { width: 99%; } </style>

"""))

[ruffsl]

For those of you who would like to achieve edge to edge notebooks, you can do so with by customizing the CSS content:
https://gist.github.com/paulochf/f6c9ed0b39f85dd85270#gistcomment-2251286

.container {
    width: 100% !important;
}

[kannes]

Considering that writing long lines of code is not good practise, I recommend against this.

[ruffsl]

@kannes , I not sure preventing poor code style is a sufficient reason to prevent dynamic max widths of figure cells. I often use the above workarounds to enable my svg and interactive figures to span the width of my display when working with intricate and detailed plots, e.g. Geo maps or financial tends. If I want the cell width change back to being modestly fixed width, then I just as soon resize my browser window on my desktop, or change my browser zoom factor, or just toggle off the workaround for that time.

[dustyny]

This debate has been answered. All the open source (and some closed) notebooks are now using full screen width cells. Jupyter Lab included. I do believe it should be back ported to Jupyter Notebooks for forwards compatibility.

[jasongrout]

For completeness, there is discussion in JupyterLab about a way to limit the max width: jupyterlab/jupyterlab#600

[dustyny]

yes there will always be people who will push for regressing a UI/UX to a previous state. Typically a user base will always have a group of people who are averse to change, especially when a UI deviates from the point in time where they learned the application. That's a typical reaction that any product manager or front end developer will be very familiar with.

The industry as a whole has settled on full width cells as a standard. This is the outcome of open source and privately funded development that included people who have expertise in UX/UI design. It is important to be consistent with industry standards and benefit from lessons learned by other projects.

You can see examples of this in:
Jupyter Lab
Zeppelin
Databricks
Google Cloud Datalab
Hue
Data Science Workbench

That said, limiting cell width does not enforce coding standards in anyway. A UI is not where this problem is typically solved. That is what a linter is for. If coding standards is a concern there are existing plugins that are better suited to handle that problem and they should be used instead of trying to create a pseudo solution in a UI.

[ellisonbg]

This is exactly the type of UX design challenge that led to the creation of JupyterLab.

(Now it has its own problem–see comment of @jasongrout above on JupyterLab not limiting the width).

To help the experience of the classic notebook though, I am fine with classic notebook moving to the 85% model. Although, this width is used across the different pages (text editor, file browser, terminal) and should be unified.

[florom]

Hi Dev-Team,

great work!

Unfortunatly you cannot increase it to over 100%.
this picture shows 110%
The cell does not increase accordingly the whole window does.

Is there a method for this too?

Thanks.

[jtpio]

Closing as Notebook 7.3 introduced a View > Enable Full Width Notebook menu entry to configure the notebook to take up the full width of the page: