Scrollable output cells

[dstansby]

For long output cells (over a certain line length I guess), it would be super neat if these could become scrollable boxes to avoid them taking up too much room on a page.

[JoshuaSiraj]

Work around to do this:

Make a docs/assets/styles.css with:

/* Make Jupyter notebook output cells scrollable */
.jp-Cell-outputWrapper  {
    max-height: 450px; /* Adjust height as needed */
    overflow-y: auto;
    padding: 10px;
    border-radius: 5px;
}

Update mkdocs.yml

extra_css:
  - assets/styles.css

[dstansby]

Thanks! Do you know if there's a way to make add a horizontal scroll bar if text is too long?

[JoshuaSiraj]

Np. I've tried and can't seem to get that to work.

[thomasmarwitz]

@dstansby

Try this:

plugins:
  - search
  - mkdocs-jupyter:
      highlight_extra_classes: jupyter-custom-highlight

Custom css that you add through mkdocs

.jupyter-custom-highlight .jp-OutputArea-area > pre {
    white-space: pre;
}

[thomasmarwitz]

@danielfrg do you agree that this behavior is so desirable that it should be toggleable via plugin setting?

[danielfrg]

I try to avoid to prescribe these things but I think its a FAQ, its worth to have a solution described in the readme instead of having it in the code IMO. Those things break between versions sometimes and its hard to test them all.