Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Styling Radio Buttons and Checklists - Spacing between button/checkbox and label

Hi all,

I’m using some simple radio buttons which are working fine, but i’m having trouble with the style - I’d simply like to add some spacing between the actual radio buttons and the labels, but I can only seem to add spacing margins or padding to the whole component itself:

html.Div([

            dcc.Checklist(
                options=[
                    {'label': 'Live chat', 'value': 'live_chat'},
                    {'label': 'Emails', 'value': 'emails'},
                    {'label': 'Phone calls', 'value': 'phone_calls'}
                ],
                values=['live_chat'],
                labelStyle = {'display': 'block', 'cursor': 'pointer', 'margin-left':'20px'}
            )

        ],
        style = {
            'padding-top': '20px'
        }
        )

Is there something within style or labelStyle i need to set, or something elsewhere? Thanks in advance!

1 Like

Have you found a solution to this? Trying to add some customisation to RadioItems but running into similar difficulties.

Haven’t found a solution yet!

The Checklist component creates a HTML structure like this:

<label>
  <input type="checkbox"/>
  Your label
</label>

which means that your label and the checkbox are both children of the label, and so you can’t add spacing between them using labelStyle. Instead, try adding a right margin to the input with an argument like

inputStyle={"margin-right": "20px"}

in your dcc.Checklist.

9 Likes

Thank you! This is what i needed