ipywidgets: GridspecLayout grid gap doesn't seem to be working

Question

Here is some code that creates a GridspecLayout object within an Accordion widget.

import ipywidgets as ipy
from IPython.display import display

FIELDS = {
    'ssh_key_path': ('SSH Key Path', ''),
    'email': ('Email', ''),
    'ssh_passphrase': ('SSH Passphrase', ''),        
    'database': ('Database', 'DASH_MFG_PROD'),
    'role': ('Role', 'PUBLIC'),
    'schema': ('Schema', 'PUBLIC')
}

widgets = {}

widgets['grid'] = ipy.GridspecLayout(2, 2)

widgets['connect'] = ipy.Button(
                    description='CONNECT',
                    icon='snowflake-o',
                    button_style='success')
widgets['clear'] = ipy.Button(
                    description='CLEAR',
                    icon='eraser',
                    button_style='warning')

widgets['grid'][0, :] = ipy.HBox(children=[widgets['connect'], widgets['clear']], layout=ipy.Layout(height='45px'))

vbox_widgets = []
for field_name, field_tuple in FIELDS.items():
    widget_descp = field_tuple[0]           
    layout = ipy.Layout(height='auto', width='125px')
    label = ipy.Label(widget_descp, layout=layout)            
    widget_default = field_tuple[1]
    if field_name == 'ssh_passphrase':
        layout = ipy.Layout(height='auto', width='90%')
        text_box = ipy.Password(
            value='password',
            placeholder='Enter password',
            layout=layout,
            disabled=False)
    else:
        layout = ipy.Layout(height='auto', width='90%')
        text_box = ipy.Text(
            disabled=False,
            layout=layout,
            value=widget_default)
    widgets[field_name] = ipy.HBox(children=[label, text_box])
    vbox_widgets.append(widgets[field_name])
widgets['grid'][1, 0] = ipy.VBox(children=vbox_widgets)

widgets['logger_label'] = ipy.Label(value="LOG OUTPUT")
widgets['logger_text'] = ipy.Textarea(disabled=False, layout=ipy.Layout(width='99%', height='100%'))
widgets['logger_text'].value = "Fill in the Snowflake credentials and conneciton details and hit the 'CONNECT' button"
widgets['logger_vbox'] = ipy.VBox(children=[widgets['logger_label'], widgets['logger_text']])

widgets['grid'][1, 1] = widgets['logger_vbox']
widgets['grid'].grid_gap = '1px'
accordion = ipy.Accordion(children=[widgets['grid']])
accordion.set_title(0, 'Configuration')
display(accordion)

The code displays the following when the accordion is opened:

My issue is the large whitespace between the first grid row(the buttons Hbox widget) and the second grid row. I have explicitly set the grid_gap to "1px" but no luck. I checked the CSS properties using the Firefox inspector and the HBox widget is the correct height:

Can someone help explain why there is so much dead whitespace between the first row and the second row?

thx

user_8731272 · Answer

The GridSpecLayout automatically gives you equally sized grid cells, so the top left cell (which holds your two buttons) has grown to the same size as the bottom left cell which holds many more widgets.

I don't know if you could have different sized rows on your gridspec; you could just use a 1x2 grid and a VBox on top for your buttons:

import ipywidgets as ipy
from IPython.display import display

FIELDS = {
    'ssh_key_path': ('SSH Key Path', ''),
    'email': ('Email', ''),
    'ssh_passphrase': ('SSH Passphrase', ''),        
    'database': ('Database', 'DASH_MFG_PROD'),
    'role': ('Role', 'PUBLIC'),
    'schema': ('Schema', 'PUBLIC')
}

widgets = {}

widgets['grid'] = ipy.GridspecLayout(1, 2)

widgets['connect'] = ipy.Button(
                    description='CONNECT',
                    icon='snowflake-o',
                    button_style='success')
widgets['clear'] = ipy.Button(
                    description='CLEAR',
                    icon='eraser',
                    button_style='warning')

# widgets['grid'][0, :] = 

vbox_widgets = []
for field_name, field_tuple in FIELDS.items():
    widget_descp = field_tuple[0]           
    layout = ipy.Layout(height='auto', width='125px')
    label = ipy.Label(widget_descp, layout=layout)            
    widget_default = field_tuple[1]
    if field_name == 'ssh_passphrase':
        layout = ipy.Layout(height='auto', width='90%')
        text_box = ipy.Password(
            value='password',
            placeholder='Enter password',
            layout=layout,
            disabled=False)
    else:
        layout = ipy.Layout(height='auto', width='90%')
        text_box = ipy.Text(
            disabled=False,
            layout=layout,
            value=widget_default)
    widgets[field_name] = ipy.HBox(children=[label, text_box])
    vbox_widgets.append(widgets[field_name])
widgets['grid'][0, 0] = ipy.VBox(children=vbox_widgets)

widgets['logger_label'] = ipy.Label(value="LOG OUTPUT")
widgets['logger_text'] = ipy.Textarea(disabled=False, layout=ipy.Layout(width='99%', height='100%'))
widgets['logger_text'].value = "Fill in the Snowflake credentials and conneciton details and hit the 'CONNECT' button"
widgets['logger_vbox'] = ipy.VBox(children=[widgets['logger_label'], widgets['logger_text']])

widgets['grid'][0, 1] = widgets['logger_vbox']
widgets['grid'].grid_gap = '1px'


children = [
    ipy.HBox(children=[widgets['connect'], widgets['clear']]),
    widgets['grid'],
]
accordion = ipy.Accordion(
    children=[ipy.VBox(children = children)]
)

accordion.set_title(0, 'Configuration')
display(accordion)

ipywidgets: GridspecLayout grid gap doesn't seem to be working

1 Answers