Notebook: Cell output on the side

[ptbrowne]

I find having the output cells on my code on the side of the input simpler and more space-efficient. I put in a Stylish extension a custom CSS to do that.

I wondered if it was something that was already in Jupyter, or could be included ?. If not, maybe some people will have the same problem as I had and could benefit from my solution :)

Here is the CSS:

#notebook-container {
    width: 100%
}

.code_cell {
   flex-direction: row !important;
}

.code_cell .input {
    width: 50%
}

.code_cell .output_wrapper {
    width: 50%
}

Result :

[takluyver]

Thanks for sharing the CSS! IMO this is not something we currently want to do in Jupyter itself. I think we've looked into it previously and found that it's a classic 80/20 problem: it's easy to get it roughly working, but hard to get it to the quality level we'd want to ship. But I'm sure other people are interested, and we'll point them to your CSS if they are.

[ptbrowne]

Fine by me, I understand perfectly :)

[lifewwy]

How to Use the CSS?

[ptbrowne]

I use the Stylish extension for Chrome. It enables to add custom CSS to a website.

[lifewwy]

Could you please tell me the process specifically. How to edit the new style in Stylish? Is the CSS you give is a complete code? Thank you!

[ptbrowne]

Yes, have you tried to copy/paste my code in the cell you are showing ?

[lifewwy]

I got it! Thank you!

[alybel]

I like it! Would it be possible to have simply two output cells for the whole notebook in an equally straightforward fashion? One for text output and one for graphics / tables? Similar to R Studio. This would be a great thing to have.

[gnestor]

@alybel JupyterLab has a concept of a _linked output_ (right-click on an output and select "Create New View for Output"). This allows you to break out an output to a new panel that can sit above/below or to the side of the notebook. You can update the output from other cells by using ipython's update_display function. This would allow you to do what you're describing without seriously messing with the classic notebook's CSS, etc.

[nezse]

Thanks!

[LuckyJosh]

Thank you, just had the idea sitting on a train and thought it might be hard to do
but no, not at all :+1:

You dont have to use any extensions to edit the css of the website,
you can add the %%html cell below to the notebook to setup the css.
The css is basically the same as above I just shrunk the total width a bit and added
a gray background to the container to have subtle dividers between output cells,
see picture below.

%%html
<style>
#notebook-container {
    width: 90%;
    background-color: #EEE
}

.code_cell {
   flex-direction: row !important;
}

.code_cell .output_wrapper {
    width: 50%;
    background-color: #FFF
}

.code_cell .input {
    width: 50%;
    background-color: #FFF
}
</style>

[nkarnev]

Thank you for this! It is super helpful. Was wondering if its possible to apply this to only a particular cell rather than the entire notebook.

Thanks

[kingjr]

@LuckyJosh

Thanks, is there a way to reverse it back to normal without restarting the notebook?

[LuckyJosh]

@kingjr
I have not thought about this but yeah, as it turns out there is a way. And a pretty easy one at that.

If you turn the cell with the above html code into a raw cell, the default keybinding is R in Command Mode, it resets the page layout. Thanks for the question, would not have found out about that otherwise. :wink::+1:

[kingjr]

@LuckyJosh Incredibly simple thanks.

Since we're at it, do you think there is an easy way to output the cell at the bottom of the input such that we easily check the results when we run a series of long cells?

e.g.
not:

[ if True:        ]  [ Out[1]: 'a' ]
[     print('a')  ]  [             ]
[     pass        ]  [             ]

but

[ if True:        ]  [             ]
[     print('a')  ]  [             ]
[     pass        ]  [ Out[1]: 'a' ]

[LuckyJosh]

@kingjr Another cool one :smile:
It kind of works by adding

.output{
    position: absolute;
    bottom: 0px;
}

inside the <style> tags.
This moves the output text to the bottom of the output cell. I dont understand html to well,
there might be some tweaking to do with the bottom: 0px part, but 0px worked fine for me.

The reason for saying 'it kind of works' is that the 'click to scroll output, double-click to hide'-area
to the left of the output cell is only clickable in the upper part not down where the output is.
You probably have to insert the same settings as above into the right html element but
i have not found that one yet.

You could argue that this is not a big issue, when the output cell is on the right of the input cell
but I will give it another look.

[kingjr]

Yes, it's a start, but the output leaks to the cells above:

[LuckyJosh]

@kingjr yikes! I am beginning to suspect that you have to tinker with the javascript for that one. :thinking:

[LuckyJosh]

@kingjr yikes! I am beginning to suspect that you have to tinker with the javascript for that one. :thinking:

[simahesh]

@LuckyJosh Thanks for the trick.. Is it possible to have only one output cell in the side? and if I run a cell only its output is there.

[LuckyJosh]

@simahesh I suspect that this would be less easy to do, if possible. The above trick changes the style of all the given html elements. As I understand it – and as I said before I am not to experienced in html, so I might be wrong – you would have to introduce a new element like sideways_output_cell for example to destinguish between normal and sideways output cells.

[simahesh]

@ptbrowne can you comment here?

[noobymcnoob]

This is how I do it (thanks to OP for posting). I have some common Python code that I call when loading each notebook and I stuff this in there.

        from IPython.core.display import display, HTML
        display(HTML("""
        <style>
        #notebook-container {
            width: 100%
        }

        .code_cell {
           flex-direction: row !important;
        }

        .code_cell .input {
            width: 50%
        }

        .code_cell .output_wrapper {
            width: 50%
        }
        </style>
        """))

[retsyo]

what if I only need to set some cell and its output to display side by side. I have read https://stackoverflow.com/a/38801975 but

1. it does not work for me

2. what is the index number of a cell for nth-child()? Is it the number of In[XX] if I restart and run the notebook from beginning?

thanks

[AkashKarnatak]

Is there a way to get output on right side for only a single cell?

I find having the output cells on my code on the side of the input simpler and more space-efficient. I put in a Stylish extension a custom CSS to do that.

I wondered if it was something that was already in Jupyter, or could be included ?. If not, maybe some people will have the same problem as I had and could benefit from my solution :)

Here is the CSS:

#notebook-container {
    width: 100%
}

.code_cell {
   flex-direction: row !important;
}

.code_cell .input {
    width: 50%
}

.code_cell .output_wrapper {
    width: 50%
}

Result :