How to alight and place ipywidgets

volodymyr picture volodymyr · May 3, 2016 · Viewed 8.7k times · Source

Is there a way to control the placement and alignment of ipywidgets (inside jupyter notebook)?

from ipywidgets import widgets
from IPython.display import Javascript, display
event_type_ui = widgets.Text(value='open', description='Test Event')
platform_ui = widgets.Text(value='Android', description='Control Event')
display(event_type_ui)
display(platform_ui)

enter image description here

I would like to specify an offset (in pixels?) to allow the label to fit and to have two controls aligned vertically.

Answer

volodymyr picture volodymyr · Aug 5, 2016

After some fiddling, I was able to get this:

Before:enter image description here

After: enter image description here

Here is a copy-paste snippet, if interested:

from ipywidgets import widgets
from IPython.display import Javascript, display

align_kw = dict(
    _css = (('.widget-label', 'min-width', '20ex'),),
    margin = '0px 0px 5px 12px'
)
platform_ui = widgets.Dropdown(description = 'platform',options=['iPhone','iPad','Android'], **align_kw)
event_type_ui = widgets.Text(value='open', description='Test Event', **align_kw)
os_version_ui = widgets.Text(value='iOS9', description='Operating System', **align_kw)
refresh_ui = widgets.Checkbox(description='Force Refresh', **align_kw)

display(platform_ui,event_type_ui,os_version_ui,refresh_ui)