Insert space and wrap text in dbc checklist - dash

Question

I'm trying to increase the margin between the icon and text in a dbc checklist. The default setting has no space between text and the icon. When trying to insert a margin, the output has the text beneath the icon and text runs into the graph's. Is it possible to shift the text up in line with the icon and wrap the text so it runs on multiple lines?

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=True)

values = ['orange', 'black', 'purple', 'red', 'brown', 'yellow']
options = []

for i in values: 
    options.append({'label': html.Div(i, style={"display": "inline", 'font-size': 15, 'color':'white', "padding-left":"0.5rem"}), 'value': i})


cat_filter_box = html.Div(children=[
    html.Div(children=[

        html.Label('Nav Bar', style = {'color':'white'}),
        dcc.Checklist(
            options = options,
            value = values,
            labelStyle = {"margin":"1rem"}, 
            style = {'display': 'flex'},
        ),

    ], className = "vstack gap-1 h-50",
    style = {'padding':'2rem'}
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(cat_filter_box, className = "bg-secondary h-100"), width = 2),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
    ])
], fluid = True)


if __name__ == '__main__':
    app.run_server(debug=True, port=8052)

See this: [https://stackoverflow.com/questions/75692815/increase-space-between-text-and-icon-in-dash-checklist](https://stackoverflow.com/questions/75692815/increase-space-between-text-and-icon-in-dash-checklist) — r-beginners, Mar 23 '23 at 06:31
Thanks but I have that code now and it doesn't work. The text is beneath the icon and it doesn't wrap. — Chopin, Mar 23 '23 at 22:30

score 1 · Accepted Answer · answered Mar 24 '23 at 01:15

I am still new to Dash, but if I set flex to labelstyle and disable the checkbox style, I get the intended result.

cat_filter_box = html.Div(children=[
    html.Div(children=[

        html.Label('Nav Bar', style = {'color':'white'}),
        dcc.Checklist(
            options = options,
            value = values,
            labelStyle = {"margin":"1rem", 'display': 'flex'}, 
            #style = {'display': 'flex'},
        ),

    ], className = "vstack gap-1 h-50",
    style = {'padding':'2rem'}
    )
])

Insert space and wrap text in dbc checklist - dash

1 Answers1