Scroll Bar not displayed using output widgets and IPython.display

[enryH]

Dear Team,
I cannot see the scroll bar when I use the example from @jasongrout (on a windows machine both in notebook and jupterlab). Any Idea how to solve that?

So:

import pandas as pd
from ipywidgets import *
from IPython.display import display
import numpy as np

w_dims = IntSlider()

out = Output()
with out:
    display(pd.DataFrame(np.random.randn(10,300)))

display(HBox([out]))

gives

whereas

import pandas as pd
from ipywidgets import *
from IPython.display import display
import numpy as np
display(pd.DataFrame(np.random.randn(5,300)))

yields what I expect:

(I need it for a more involved example, but I thought to start easy)

Thanks in advance!

[jasongrout]

Looking into it, it seems that the overflow:visible css from the jupyter-widgets css class is overriding the JupyterLab overflow:auto css:

Disabling the overflow:visible class for .jupyter-widgets fixes the issue. One way to fix this is to make more specific .jupyter-widgets.jp-OutputArea-output {overflow: auto} to override the jupyter-widgets default css.

I'm not sure that having overflow:visible as a default is a good idea in general. We have had it for a long time, so it break things quite a bit if we change it now, though.

[jasongrout]

Here is the line with that css:

ipywidgets/packages/controls/css/widgets-base.css

Line 67 in fa3c706

overflow: visible;

[jasongrout]

Actually, looking at the DOM again, #2500 is an important fix here, in that the jupyter-widgets class that is overriding the overflow is at the root widget render, not just on the output widget.

[jasongrout]

So actually this issue may be a duplicate of #2499 (i.e., same cause and fix)?

[enryH]

So I have to set overflow: auto in my local installation of ipywidgets? Or can I do this within a notebook only for the use-case at hand?

[jasongrout]

I just merged #2500 and tested, and it looks like that solved the issue in JupyterLab. Unfortunately, the fix won't be easy to make (essentially you'd have to tweak the ipywidgets extension to basically apply #2500). It will be in our next release, coming very soon, though.

[jasongrout]

One (not very satisfactory, but maybe sufficient?) workaround is to set an explicit width for your output widget, like out.layout.width='400px'.

[jasongrout]

Closing since #2500 fixes this and has been merged.

[jasongrout]

Closing since #2500 fixes this and has been merged.

But feel free to continue the discussion if you'd like to talk about this or workarounds more.

[enryH]

Thank you very much @jasongrout ! I will restrict the width for now and since it's updated, I won't have to worry about it for too long anyways:)