Interaction between BHox, Output and IntSlider shrinks the slider to a point

[tsierens]

Description

When using an IntSlider and Output widgets in an HBox, the slider acts properly in a jupyter notebook, but while in a Voila client it is shrunk to take up zero space

Reproduce

The following snippet works in jupyter, but fails in voila.

from ipywidgets import IntSlider, Layout, HBox, Output

style = {'description_width' : '12em'}
layout = Layout(width = '36em')
output = Output()
with output:
    print('hi')
HBox([IntSlider(value = 0, min = 0, max = 10, style = style, layout = layout), output])

Expected behavior

For the IntSlider to be useable

Additional Context

These widgets used to work as intended. I am not sure when they started to malfunction.

If using JupyterLab

jupyterlab==4.4.2
jupyterlab_pygments==0.3.0
jupyterlab_server==2.27.3
jupyterlab_widgets==3.0.15

[egpbos]

I came to post a very similar bug, but will just add to this one, because it is likely related. (I even had written almost the same MRE with a with output: print('hi') 😆)

In my case, the problem is with VBox that is not displayed in Voila while it works fine in Jupyter. This reproduces the issue:

import ipywidgets
output = ipywidgets.Output()
checkboxes = [ipywidgets.Checkbox(description=f'box {i}') for i in range(5)]
with output:
    print("hi")
display(ipywidgets.HBox([ipywidgets.VBox(checkboxes), output]))

[egpbos]

Replacing HBox with just Box has the same problem.

[jgunstone]

I haven't run your code so I'm not 100% sure but I had an issue like this that was due to the widgets.Output widget automatically expanding to 100% width and therefore squashing the other items in the box. Manually setting the width of the output widget fixed it for me though the not the most satisfactory solution.

[egpbos]

Thanks @jgunstone, that workaround works! Both with a relative and an absolute width:

output_layout = {
    # 'width': '100%', # this works as well
    'width': '300px',
}

output = widgets.Output(layout=output_layout)

Indeed, it seems then that the default width of either the Output widget or perhaps one of its contents (in my case the <pre> HTML tag generated by print()) is something to look into when someone wants to fix this issue.