ipywidgets

ipywidgets copied to clipboard

I currently have multiple widgets and widget descriptions and they are not aligned. They look like this: I want the 'Next bottleneck' button to be aligned with the start of all 3 labels, and I want the start of the slider itself to be aligned with the start of the two dropdown menus, with the appropriate padding added between each description label and widget to make it align properly. What is the best way to do this, preferably one that does not require manually setting pixel sizes for elements?

Can you post your code for the few controls above? Things should basically align by default if you just put them all in a vbox.

Currently they're all separate widgets:

widgets.FloatSlider(min=10.0, max=mg.max_clock(), step=10.0, description='Clock Time:')
widgets.Dropdown(options=tuple(Frontend.filters.keys()), value=None, description='Attribute Filter:', style={'description_width': 'initial'})
widgets.Dropdown(options=tuple(Frontend.filters.keys()), value=None, description='Bottleneck Filter:', style={'description_width': 'initial'})
widgets.Button(description='Next bottleneck', button_style='', tooltip='Automatically scroll clock time to next bottleneck', icon='forward')

There are several ways of doing that. Here's one way that involves hardcoding the description width:

style=dict(description_width='110px')
widgets.VBox([
widgets.FloatSlider(min=10.0, step=10.0, description='Clock Time:', style=style),
widgets.Dropdown(options=('a','b'), value=None, description='Attribute Filter:', style=style),
widgets.Dropdown(options=('a','b'), value=None, description='Bottleneck Filter:',style=style),
widgets.Button(description='Next bottleneck', button_style='', tooltip='Automatically scroll clock time to next bottleneck', icon='forward')
])