ipywidgets

ipywidgets copied to clipboard

I am using the standard Output widget for adding some rich IPython display to my app. However, if the output gets too long it changes into a scroll-bar. I've tried inspecting the elements, but it seems that the DOM element <div class="output"> Is changed into a <div class="output output-scroll"> if it gets too large.

Any ideas on how to prevent this from happening?

I found an old issue from 2017 that never seemed to get actioned.

For now I am using the following work-around.

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))

I found an old issue from 2017 that never seemed to get actioned.

For now I am using the following work-around.

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))

I'm attempting to use the above work-around, but the height in output_scroll is still defaulting to 24em

The output takes a few seconds to load, and is dynamically changes when pressing either the Next or Previous buttons. Here is my code:

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))

i = [-1]

next_button = widgets.Button(description="Next")
prev_button = widgets.Button(description="Previous")
out = widgets.Output()

def next_button_clicked(_,  incr=1):
    with out:
        i[0] += incr
        out.clear_output(wait=True)
        show_series(series_data[i[0]])
        
next_button.on_click(next_button_clicked)

def prev_button_clicked(_):
    return next_button_clicked(_, -1)

prev_button.on_click(prev_button_clicked)

buttons = widgets.HBox([prev_button, next_button])
display(buttons)
display(out)
next_button_clicked(next_button)