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

Dash Python
1

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
2

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

3

Haven’t found a solution yet!

4

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.

11 Likes
5

Thank you! This is what i needed

6

Hi, I’m currently dealing with the same problem. Just for the sake of keeping the RadioItem without turning to Checklist. I “dribble” the issue by adding a white-space " " at the radio item labels, something like:

return [{‘label’:" "+i, ‘value’: i} for i in sorted(dff[“columns”].unique())]

It`s a very rusty solution but it worked fine for me.