Plotly figure widget auto size does not seem to work with Tab

📊 Plotly Python
1

Ippywidget supports containers for widgets such as VBox, HBox and Tab. It seems that Plotly widgets have some strange behavior when used with these containers.

For example, when I create a tab with identical VBox contents, the second tab’s graph object becomes shorter (truncated). The logical expectation is they should have the same width. Here is a sample code to create such “bug”.

from ipywidgets import *
import plotly
import plotly.graph_objects as py 
fig = py.FigureWidget(layout = plotly.graph_objs.Layout(title = ""))
box = widgets.VBox([fig])
tab_contents = ['1', '2']
children = [box, box]
tab = widgets.Tab(children = children)
for i, j in enumerate(tab_contents):
    tab.set_title(i, j)
display(tab)

The above example could be fixed by declaring the width to be 600 or similar. However, when the Tab contains other HBox and VBox nested in one Tab, things start to get out of hand. Even worse, if I create a plotly table instead of the graph, some of the entries just become blank. Is there an easy to fix this other than manually fix all the dimensions of the figure widget?

2

It seems that most of the people are using Plotly Dash in addition to the basic Plotly graph library. This has kind of forced me to switch to Plotly Dash as well for the greater control of the layout. It would still be nice if Plotly does not change the default widget behavior.

3

In case anybody else runs into this problem, the following code solved the problem for me

def on_tabs_change(change):
    f2.layout.autosize = True

f1 = go.FigureWidget()
f2 = go.FigureWidget()
tabs = widgets.Tab(
    children=[f1, f2]
)
tabs.observe(on_tabs_change, names='selected_index')
tabs