Alignment of description and widgets

Hello Team, I want to align boxes and description in my code. Please let me know if there is a work around.

Code snippet:

def helper(a,b,c):
            print (a)
TextField1= Text(value='', placeholder='Type client table name',description='Client List Name:',disabled=False)
TextField2= Text(value='', placeholder='Type flagged column name',description='Flagged column name:',disabled=False)
TextField3= Text(value='', placeholder='Type columns name',description='Columns name:',disabled=False)
x=interactive(helper,a=TextField1,b=TextField2,c=TextField3)
display(x)

I tried to reference another stack page and tried a code that worked for one of the users which was as below

The same did not work for me as can be seen below

Code snippet below:

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)

This snippet is a just a snap of a much bigger UI which I did not share because of confidentiality. Any workaround is much appreciated.

The same issue has been logged in stack overflow @ https://stackoverflow.com/questions/47577096/python-ipywidget-align-description-and-boxes

[jasongrout]

Thanks for giving both the images and the code snippet so it was easy to modify your example!

Try this (in ipywidgets 7):

from ipywidgets import *

style = {'description_width': '150px'}

def helper(a,b,c):
            print (a)
TextField1= Text(value='', placeholder='Type client table name',description='Client List Name:',disabled=False, style=style)
TextField2= Text(value='', placeholder='Type flagged column name',description='Flagged column name:',disabled=False, style=style)
TextField3= Text(value='', placeholder='Type columns name',description='Columns name:',disabled=False, style=style)
x=interactive(helper,a=TextField1,b=TextField2,c=TextField3)
display(x)

[mrgloom]

I fixed it, but maybe in some awkward way:

table_style = {'description_width': 'initial'}
table_layout = {'width':'150px', 'min_width':'150px', 'height':'28px', 'min_height':'28px'}
row_layout = {'width':'200px', 'min_width':'200px'}

table_header_0_widget = Button(
    description='',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)

table_header_1_widget = Button( description='header 1',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               )
table_header_2_widget = Button( description='header 2',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               ) 
table_header_3_widget = Button( description='header 3',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               )
							   
row_1_0_widget = Button(
    description='row2 looooooooooooong:',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)
row_1_1_widget = BoundedFloatText(
                                    value=70.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    layout=table_layout,
                                    style=table_style,
                                 )
row_1_2_widget = BoundedFloatText(
                                    value=80.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_1_3_widget = BoundedFloatText(
                                    value=90.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_0_widget = Button(
    description='row3:',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)
row_2_1_widget = BoundedFloatText(
                                    value=20.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_2_widget = BoundedFloatText(
                                    value=30.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_3_widget = BoundedFloatText(
                                    value=40.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )

hbox1 = HBox([table_header_0_widget, table_header_1_widget, table_header_2_widget, table_header_3_widget])
hbox2 = HBox([row_1_0_widget, row_1_1_widget, row_1_2_widget, row_1_3_widget])
hbox3 = HBox([row_2_0_widget, row_2_1_widget, row_2_2_widget, row_2_3_widget])
ui = VBox([hbox1, hbox2, hbox3])

def func(p1,p2,p3,p4,p5,p6):
    print(p1,p2,p3,p4,p5,p6)
    
w = interactive_output(func,
                       { 
                         "p1":row_1_1_widget,
                         "p2":row_1_2_widget,
                         "p3":row_1_3_widget,
                         "p4":row_2_1_widget,
                         "p5":row_2_2_widget,
                         "p6":row_2_3_widget,
                       })

display(ui, w)