How to change the style/width of cells in JupyterLab?

user_7357673 0
Viewed 990

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

jupyter-lab ipython python-3.x css html
1 Answers

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.

user_66469120
Related