I have a long Sympy expression that I'd like to get printed with a horizontal scrollbar beneath it. Is it possible to do so in Jupyter? I'm able to toggle vertical scrolling but I want it to be horizontally scrollable instead. The problem with vertical scrolling is that the output of sympy.pretty_print() gets badly distorted in my case. The output also looks ugly and the user has to scroll through the whole output unnecessarily.
Something similar to the np.set_printoptions(linewidth=some_large_number) and/or np.set_printoptions(threshold=some_large_number) approach can be useful but doesn't fix the problem if Jupyter's output window is itself too narrow.
The quickest solution I ended up with is inserting this line somewhere at the top of your notebook:
from IPython.display import display, HTML
display(HTML("<style>pre { white-space: pre !important; }</style>"))
If you want to change this setting for all of your notebooks, you'll need to mess around with the custom.css config file for Jupyter as discussed here.
I wasted too much time figuring this out. Hopefully I can help some of you figure it out quicker!
Iterating on Eric's response slightly, here's a self-contained version that only creates horizontally-scrolling outputs when you want it to, rather than enabling it notebook-wide:
from IPython.display import display, HTML
from pprint import pformat
def boxprint(*args):
for arg in args:
display(HTML('<pre style="white-space: pre !important;">{}</pre>'.format(pformat(arg))))
As written by Eric, changing the white-space property to pre prevents automatic wrapping of output cells, and thus forces an horizontal scrollbar for all wide outputs of the current notebook.
Unfortunately, changing this property also prevents automatic wrapping when editing input cells, which is particularly annoying when editing markdown cells. Even worse: this behavior is not limited to the current notebook, but happens on all open tabs when using JupyterLab, for instance.
The workaround I propose, is to define a function to switch between the standard behavior white-space: pre-wrap and the scrollbar behavior white-space:pre. This simple function does the job:
def hscroll(activate=True):
"""activate/deactivate horizontal scrolling for wide output cells"""
from IPython.display import display, HTML
style = ('pre-wrap','pre')[activate] # select white-space style
display(HTML("<style>pre {white-space: %s !important}</style>" % style))
On hovering right below
out[]:
in notebook you see "scroll output" . On clicking anywhere in that area you get your output scrollable both horizontally and vertically.
Related
Anyone know if there is a way to make the ng zorro select (multi) to stick to one line instead of wrapping the selected items. In some scenarios its fine but when you have certain layouts you cant have the height doubling on each selection.
There is a codebox demo here: https://codesandbox.io/s/2lp2n (reduce the size of the view panel to see what i mean).
I have tried pretty much all i can think of (adding css to the select and select top classes to try and force it to stay on one line but it doesnt seem to work). I wanted to ask here first to see if anyone has any ideas since their git would normally close a question and ask me to come here first.
Thanks
In the end i just had to add:
flex-wrap: nowrap !important;
to nz-select-top-control
I am trying to load a widget (through HTML code) into my Jupyter Notebook's cell. I am trying out ways to get rid of the block shown on left side which shows "click to scroll output;double click to hide" in the below picture:
It's obtrusive. And also is there a way i can make the frame of the slide (highlighted in blue) larger (for only the current cell) so that it's clearer for view ?
I tried changing the "height" and "width" of RISE extension from "Nbextensions" tab but in vain.
This might sound ridiculous but, have you tried to remove this block using your browser's element inspector?
Example (remove code input)
Slide before deleting code input
Selecting correct div
Deleting input div
Slide after deleting code input
Of course it's just a temporarily solution and as soon as you refresh/reload your notebook it will be back as before.
The custom.css works very well for adjusting the width of a jupyter notebook (and the font size while we are at it..):
.container { width:100% !important; height: 200px; }
.CodeMirror pre {font-family: Monaco; font-size: 9pt;}
The cell height is trickier however since we do not want all cells to be made overly tall.
Here is an example of a cell "wanting" more vertical headroom:
Is there a per-cell approach to achieve this? There are actually two parts to this question:
How to do this for python kernels (probably the easiest):
How to change the cell height for other kernels: specifically we are interested in R and Spark
It's a little hacky, but the python flavor of this can be done using jquery and some IPython functions that let you execute javascript inline within a cell.
from IPython.display import display, HTML
This will let you execute javascript from anywhere in any cell like this:
display(HTML("<script>alert('Hello, World!');</script>"))
Then we mix that with some jquery and a few known classes that are on Jupyter div elements and we can change the output_wrapper size of the executed cell to whatever it needs to be:
display(HTML("<script>$('div.cell.selected').children('div.output_wrapper').height(50);</script>"))
If you don't want to re-run the code in that cell again, insert a cell above the one you want to change and tweak it to select the next cell div and update the height:
display(HTML("<script>$('div.cell.selected').next().height(100);</script>"))
Wrapping these with helper functions would be easy and worth while if it was needed on multiple cells.
This obviously won't be kept when the notebook is closed or reloaded. For that, you could improve this by adding a cell metadata attribute, then put something in the custom.js that reads and renders as needed.
I recently started using Atom and try to make it as nice to work with as possible.
However I couldn't figure out how to change the height of the bottom window (a name for it would already help).
My goal is to have my console etc. as minimalistic as possible.
E.g.:
Atom's bottom window shown here with an output example from Atom-Runner
How do I only show the atom-runner's output and not the grey rest of the window on top of it?
How can I get rid of unnecessary labels like "Atom Runner: data.py"?
I found that you can change quite a bit within the styles.less file with commands like:
atom-workspace {
height: calc(...);
}
But that didn't really help me.
However I couldn't figure out how to change the height of the bottom window (a name for it would already help).
atom-runner displays its results in a bottom panel. There are a few different types of containers in the Atom window:
Panes are the content in the middle of the editor. Panes can hold as many items as you want, which are usually associated with a specific file (see TextEditors)
Docks are the expandable areas just outside the panes (the tree-view and github packages use docks). They can have multiple items and will create tabs for them.
Panels are the spaces on the edge of the Atom window. You can't hide them without disabling the whole package.
How do I only show the atom-runner's output and not the grey rest of the window on top of it?
The "grey rest of the window" is the bottom dock. You can hide it by clicking on the semicircle with the down arrow.
How can I get rid of unnecessary labels like "Atom Runner: data.py"?
I disagree that it's unnecessary, and you might some day find that you need to know what file you ran. However, if you want to do this, you can add the following to your styles.less:
.atom-runner h1 {
display: none;
}
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/