CODEWITHSUNDEEP
pythonwidgetjupyter-notebook
user3657378
user3657378

Reputation: 23

ipython CheckboxWidget placement

I'm trying to create 2 columns of CheckboxWidgets in my ipython notebook:

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

comps = ['A', 'B', 'C']
trigs = ['X', 'Y', 'Z']

components = []
for comp in comps:
    components.append(widgets.CheckboxWidget(description = comp, value=False))

comp_container = widgets.ContainerWidget(children = components)
comp_container.add_class('vbox')
comp_container.add_class("align-start")

triggers = []
for trig in trigs:
    triggers.append(widgets.CheckboxWidget(description = trig, value=False))

trig_container = widgets.ContainerWidget(children = triggers)
trig_container.add_class('vbox')
trig_container.add_class("align-end")

main_container = widgets.ContainerWidget(children = [comp_container, trig_container])
main_container.set_css({
    'background': '#999999',
    'width': '100%',
})
main_container.remove_class('vbox')
main_container.add_class("hbox")

display(main_container)

unfortunately, this produces:

https://i.sstatic.net/MgyXl.png

Is it possible to have 2 lists of checkboxes side-by-side?

Upvotes: 2

Views: 1091

Answers (1)

mforbes
mforbes

Reputation: 7181

Yes. I don't fully understand why the behaviour is this way, but you need to change the css classes 'vbox' and 'hbox' after displaying the widget:

...    
display(main_container)
main_container.remove_class('vbox')
main_container.add_class("hbox")

Output with two-columns of widgets

Upvotes: 2

Related Questions