Remove break between two components

Dash Python
1

I would like to have the title and the checklist in the same line. Remove the break

    html.Div([html.P("Title goes here :"), 
    dcc.Checklist(id='DropDown',
    options=[
        {'label': '-1.5', 'value': -1.5},
        {'label': '0', 'value': 0},
    ], value=[0,-1.5], labelStyle={'display': 'inline-block','text-align': 'justify'},style={'display': 'inline-block'} ), 
    ], style={'display': 'inline-block'}),

that should result in something like this:

Title: Checklist

Appreciate any help:)

2

Hi @divyar2630

Your html.P is using the entire row, add the style to solve the issue.

html.P("Title goes here :", style={'display': 'inline-block'}),

Here is the code that works as expected:

app.layout = html.Div([
            html.Div([
            html.P("Title goes here :", style={'display': 'inline-block'}), 
            dcc.Checklist(
                id='DropDown',
                options=[{'label': '-1.5', 'value': -1.5},{'label': '0', 'value': 0}],
                value=[0,-1.5], labelStyle={'display': 'inline-block','text-align': 'justify'},
                style={'display': 'inline-block'}),
            ], style={'display': 'inline-block'}),
], )

image

1 Like