Add auto-detect horizontal scrollbar to AppLayout

[info-rchitect]

Problem

I use Plotly to create FigureWidgets that I interactively change using ipywidgets like IntSlider for changing the size of the FigureWidget. When the FigureWidget size gets to large horizontally, there is no way to scroll to the right to see what is not being displayed. I am displaying the FigureWidget within the context of an Output widget so I can control where it goes versus being displayed in the current Notebook cell.

Proposed Solution

Auto-detect if content in an Output widget requires a horizontal scrollbar.

Additional context

Here is a visual showing what is happening:

The Output widget is set to AppLayout.center and the Plotly figure widget is being displayed with that Output widgets as so:

        f_widget = go.FigureWidget(fig)
        self.visual_box = ipyw.Box([f_widget])
        with self.output_widget:
            display(self.visual_box)

I really can't tell if this is a limitation of the Output widget, the Box widget. or the AppLayout widget.

thx

[jtpio]

Thanks @info-rchitect.

Out of curiosity, have you tried using some of the styling properties like overflow to see if it is being applied in that case? (mentioned in https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html)

[info-rchitect]

@jtpio Thanks for the suggestion. I changed the Output and the Box widgets layout as so:

ipyw.Output(layout={'border': '1px solid black', 'width': '1600px', 'height': '100%', 'overflow': 'scroll', 'display': 'flex', 'flex_flow': 'row'})
ipyw.Box([f_widget], layout=ipyw.Layout(width='1600px', overflow='scroll', display= 'flex', flex_flow='row'))

This resulted in a scrollbar being present but it will only scroll to the size of the AppLayout center grid.

If I make the Output and Box widget sizes smaller (pixel-wise) I get more scroll bar but it always ends at the same place wrt to the size of the plotly chart inside of it. Do I need to enable the scrollbar on the AppLayout center grid? If so, how is that done?