3

I tried

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

from this answer. I also tried

%%html
<style>.container { width:60% !important; }</style>

but they don't work.

enter image description here

krassowski
  • 13,598
  • 4
  • 60
  • 92
Akira
  • 2,594
  • 3
  • 20
  • 45

1 Answers1

5

The names of classes were reworked in JupyterLab and are now easier to understand and more predictable. Use the following selectors for JupyterLab:

  • .jp-Cell to change the width of all cells
  • .jp-Cell.jp-CodeCell to change only width of the cells with code
  • .jp-Cell.jp-MarkdownCell to change the width of markdown cells
  • .jp-Cell.jp-Editor to change width of the editor only
  • .jp-OutputArea-output to change the with of cell outputs

For example, to reduce the width of cells using IPython you could use:

from IPython.core.display import display, HTML
display(HTML("<style>.jp-Cell { width: 60% !important; }</style>"))

You can use the DOM inspector, a tool that all browsers provide nowadays, (see the instructions here) to check class names of specific elements that you wish to modify.

krassowski
  • 13,598
  • 4
  • 60
  • 92
  • This works fantastically, just like a charm. Is there anyway to center the cells after we adjust the width? – Akira Feb 19 '21 at 14:58
  • It would be great and complete to receive your question to my new [question](https://stackoverflow.com/questions/66280016/how-to-center-a-cell-in-jupyterlab-after-its-width-is-decreased). – Akira Feb 19 '21 at 15:05
  • The line `display(HTML(""))` does not work in my JupyterLab. Could you please have a look at my question [here](https://stackoverflow.com/questions/66280349/how-to-have-different-widths-of-code-cell-and-output-cell)? – Akira Feb 19 '21 at 15:26