automatically adjust IPython widgets layout

Question

I'm creating an interactive jupyter notebook with ipython widgets and want the user to select from a certain number of checkboxes. I'm using the code below to visualize the HBox that contains the checkboxes.

num_checks = 10

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

checkboxes = []
for f in range(num_checks):
    checkboxes.append(\
        widgets.Checkbox(description = 'Checkbox [%d]'%(f), \
                         value=False, width=50))

cb_cont.children=[i for i in checkboxes]
display(cb_cont)

Here is a screenshot of the output from the above code:

As you can see, the content of the box overflows and goes beyond the width of the container.

I can change the behavior by setting the overflow_x property to be one of the following: ['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', ''].

For instance, cb_cont.overflow_x = 'scroll' results in the following output window:

in which the content doesn't overflow but becomes invisible and can be scrolled.

How can I set the property of the box to visualize the content that does not fit on a newline?

Obviously I could use multiple HBox objects each one containing the maximum number of checkboxes that fit in a window size, however this is not the wanted solution for a set of reasons:

Depending on the screen resolution that number could change.
The number of checkboxes to pick from depends on a previous computation ans is not known it in advance.

Ely · Accepted Answer · 2016-09-06 12:41:24Z

6

I was having the same issue with the widgets and after toying around with the various Box properties, here is what I came up with:

You need to set the following properties:

display: 'inline-flex'
flex_flow: 'row wrap'

This worked for me with any number of checkboxes (I tried up to 100). On the other hand, setting the height property was not very useful. You need the height to adapt depending on the number of checkboxes or screen resolution.

import ipywidgets as widgets
from ipywidgets import *
from IPython.display import display

num_checks = 50

cb_cont = HBox(layout=Layout(width='100%',display='inline-flex',flex_flow='row wrap'))
#cb_cont.overflow_x = 'scroll'

checkboxes = []
for f in range(num_checks):
    checkboxes.append(\
        widgets.Checkbox(description = 'Checkbox [%d]'%(f), \
                     value=False, width=50))

cb_cont.children=[i for i in checkboxes]
display(cb_cont)

answered Sep 6, 2016 at 12:41

Ely

5185 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chen Avnery Over a year ago

I've been playing around with the flex_flow and flex_wrap properties for a while and couldn't make the box wrap the items when the items were Dropdown elements. It only worked with other elements like buttons and such. Your answer worked and was spot on! Thanks!

Etienne Cmb · Accepted Answer · 2016-04-17 15:58:05Z

0

You can use percentage for the width (and height):

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

and set cb_cont.overflow_x = 'auto'

answered Apr 17, 2016 at 15:58

Etienne Cmb

1317 bronze badges

Collectives™ on Stack Overflow

automatically adjust IPython widgets layout

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related