Adjust the Space Between Two Jupyter Widgets

Question

I'm trying to create a Jupyter Notebook to help some colleagues interactively access some data. I want to give them a bunch of widgets that allow them to use different criteria to filter the data.

Mainly it works beautifully, but I can't adjust the spacing between two widgets, and it's going to drive me nuts.

I've tried following the instructions here, but the two buttons are always right next to each other.

class Dashboard(object):
    def __init__(self):
        item_layout = Layout(flex='1 1 auto',
                             width='auto')

        toggle = widgets.ToggleButtons(
            options=["Foo", "Bar"],
            value="Foo",
            description="Foobar:",
            disable=False,
            layout=item_layout,
        )

        check = widgets.Checkbox(
            value=True,
            description="Checked",
            disabled=False,
            layout=item_layout,
        )

        box_layout = Layout(display='flex',
                            flex_flow='row',
                            justify_content='space around',
                            width='500px',
                            button_layout='solid',
                            )

        buttons = widgets.Box(children=[
            widgets.interactive(self._set_foobar, foobar=toggle, layout=item_layout),
            widgets.interactive(self._set_checked, checked=check, layout=item_layout),
        ],
            layout=box_layout)

        display(buttons)

    def _set_foobar(self, foobar):
        self._foo = foobar == 'Foo'

    def _set_checked(self, checked):
        self._checked = bool(checked)

If I then open up a Jupyter notebook and do:

import dashboard
y = dashboard.Dashboard()

It produces:

If I don't make the widgets interactive i.e. children=[toggle, check] it works perfectly.

Is there a way that I can adjust the space between interactive widgets?

How about you create a [mcve]? We need to inspect the final result so we can see what's going on and tell you what to change to fix it. Can you reproduce the behavior here? — tao, Feb 07 '17 at 23:31
I've made an edit, but that's about as close to an MCVE as I can make. To see the results you need to save that code, then import and instantiate inside a notebook. — Batman, Feb 07 '17 at 23:38
Well, I know CSS. I don't know Jupyter. I was hoping I could help. Good luck! :) — tao, Feb 07 '17 at 23:43

score 4 · Answer 1 · answered Apr 27 '19 at 11:44

In Jupyter you can add classes to various widgets. If you have a button widget, add a class name to it using the add_class() function. Then, use the display() function to add some CSS.

import ipywidgets as widgets
from IPython.core.display import display, HTML
but_1 = widgets.Button(
     description = 'Button'
)
but_1.add_class("left-spacing-class")
display(HTML(
     "<style>.left-spacing-class {margin-left: 10px;}</style>"
))
display(but_1)

Adjust the Space Between Two Jupyter Widgets

1 Answers1