(Auto-)Resize plots that start too large

[mueslo]

Describe the issue

Plots by default are sometimes too large, and the right side is cut off (e.g. when using the sexy Jupyter Lab side-by-side rendering or just using a small screen. Obviously you then want to resize them. However, since the resize handle is at the bottom right, it is also not visible. So the only current solution is to manually change the figure size in the code and re-run until it is visible. Not an ideal solution; sometimes you may not have direct access to the code creating the figure.

Some possible solutions:

• add a horizontal scrollbar (probably would need to be done on the JupyterLab side)
• introduce an auto-resize feature in the ipympl figure toolbar that will automatically resize the figure to the available width when pressed
• auto resize all newly created figures, maybe activatable by an "%ipympl autoresize" magic method
• make the handle location configurable
• scale the entire figure such that all of it is always visible (probably doesn't work too well with manual resizing), just like for inline plots

The current state is rather frustrating.

Example:

Versions

jupyterlab==3.2.8
jupyterlab-widgets==1.0.2
ipympl==0.8.7
ipywidgets==7.6.5

[mueslo]

One quick temporary (Jupyter Lab side) workaround is the following;

in CSS (widget.css) add

.p-Widget, .lm-Widget {
  overflow-x: auto;
}

or alternatively:

.jupyter-matplotlib {
  overflow-x: visible; /* or auto; was hidden */
}
.jupyter-widgets {
  overflow-x: hidden; /* or auto; was visible*/
}

or

.jp-OutputArea-child {
  overflow-x: auto;
}

This gives you back the horizontal scrollbar when the figure overflows the cell horizontally.

[ianhi]

Thanks for reporting and suggesting a fix @mueslo !

I think this has the same core cause as #242

one point of clarification: does the scroll bar only show up when the widget is partially clipped, or is it always present? If the former then I like the solution of modifying the jupyter-matplolitb class - we should not be messing with jupyterlab or lumino css as that will have broad sideeffects. Do you also need to change the .jupyter-widgets class?

[mueslo]

With my solutions it only shows up when necessary, i.e. when the output exceeds the jupyter lab output cell size. But I have noticed that JupyterLab never displays horizontal scroll bars, so maybe it should be fixed there instead of here (and all of these fixes would require changes outside of ipympl also)

[ianhi]

But I have noticed that JupyterLab never displays horizontal scroll bars, so maybe it should be fixed there instead of here.

I think both are an option. It's much easier to push a new release here than in jlab so we can do a fix here and you can also open an issue there. Would you be willing to make a PR with your fix?

[mueslo]

If the former then I like the solution of modifying the jupyter-matplolitb class - we should not be messing with jupyterlab or lumino css as that will have broad sideeffects. Do you also need to change the .jupyter-widgets class?

Sadly it seems like modifying .jupyter-widgets is also necessary in that case, I havent found any way to make the horizontal scrollbar appear in just .jupyter-matplotlib without setting .jupyter-widgets overflow-x to hidden.

[VladimirIvonin]

Hello, @mueslo! Could you tell me, please, where can I find widget.css file?

[Firestar-Reimu]

I have the same problem here that the image is too large, what is the solution now? Where is the widget.css? @mueslo