Adjust the height of individual jupyter notebook cells - jupyter-notebook

Question

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

Answer 1

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.