Ipywidgets: Disable scrolling of Output widget

[oschuett]

I'm using the Output widget to display lengthy content. At some point the auto-scrolling of the output-area kicks in. It would be great if there were a simple way to disable scrolling e.g. Output(scroll=False)

[jasongrout]

Definitely! This should be pretty straightforward to do.

[jasongrout]

For whoever wants to take this on, it will likely involve changes in the python side: https://github.com/jupyter-widgets/ipywidgets/blob/master/ipywidgets/widgets/widget_output.py

as well as the js sides:

• jlab: https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/jupyterlab-manager/src/output.ts
• html manager: https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/html-manager/src/output.ts
• classic notebook: https://github.com/jupyter-widgets/ipywidgets/blob/master/widgetsnbextension/src/widget_output.js

[jasongrout]

I think I would prefer a view-level control, like in the notebook (clicking on the prompt area toggles the scroll state). That may be (a) easier to implement and (b) more natural and consistent with current notebook outputs. Right now, we hide the prompt area in that output area because it's rather annoying when nesting output widgets. However, if we can come up with a good UI (perhaps a very narrow area to the right of the output widget?), I think that would be better than programmatic control.

[oschuett]

I would really like to also have some programmatic control. The big difference wrt. top-level output areas is that their initial scroll state is stored in the ipynb file. Hence, I would suggest sth. like Output(initial_scroll_state=...).

[eayoungs]

Hey, there; I'm an aspiring contributor and I'd like to take a shot at tackling this issue.

Cheers

Eric

[beasteers]

Any headway on this issue?

[IssamLaradji]

is there a fix to this? the output widget still gets the scroll bar when its content gets large.

[dieterwang]

If you're trying to display html in your Output, you could wrap the content into a <div style="none"> so that the scollbar isn't triggered. Then, after a short delay (100ms was enough for me), show it again. Something like below

html = """
    <div id="foo" style="display:none;">
    ## actual content ##
    </div>
"""
display_html(html, raw=True)
display_javascript("setTimeout(function(){$('#foo').show()}, 100)", raw=True)

[evanreichard]

I'm using this to disable all auto scroll bars on the whole page. Im sure you could combine this with some JS to find nearest element so it would only apply to a single output.

style = """
    <style>
        .output_scroll {
            height: unset !important;
            border-radius: unset !important;
            -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
        }
    </style>
    """
display(HTML(style))

[sitnarf]

I edited @evanreichard snippet to disable scrolling only for all output widgets:

style = """
    <style>
       .jupyter-widgets-output-area .output_scroll {
            height: unset !important;
            border-radius: unset !important;
            -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
        }
        .jupyter-widgets-output-area  {
            height: auto !important;
        }
    </style>
    """
display(HTML(style))

[gsteele13]

And what if it is not an HTML ouput?

I'm trying to display a long output with print() and am getting a scroll bar that I would like to avoid....

thanks!

[xuancong84]

I edited @evanreichard snippet to disable scrolling only for all output widgets:

style = """
    <style>
       .jupyter-widgets-output-area .output_scroll {
            height: unset !important;
            border-radius: unset !important;
            -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
        }
        .jupyter-widgets-output-area  {
            height: auto !important;
        }
    </style>
    """
display(HTML(style))

Your solution works perfect. I think your code should be in the default Jupyter Notebook initialization code base because user can still toggle the output widget scroll behaviour by clicking the left region to the output widget. The existing Jupyter notebook code toggles between a slightly longer scroll and slightly shorter scroll, that is meaningless.

[robelgeda]

Thank you all for looking at this, it saved me a lot of trouble
@gsteele13 You just copy and paste this before you initate your widget and it should work:

import ipywidgets as widgets
from IPython.display import display

style = """
    <style>
       .jupyter-widgets-output-area .output_scroll {
            height: unset !important;
            border-radius: unset !important;
            -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
        }
        .jupyter-widgets-output-area  {
            height: auto !important;
        }
    </style>
    """
display(widgets.HTML(style))
wd = widgets.interact(slider, x=widgets.BoundedIntText(min=0, max=len(result_cat)-1))