pythoncssplotly-dashdash-bootstrap-components

Increase space between text and icon in dash checklist


I can adjust the margin and padding around/between various dcc components. But I'm aiming to increase the space within these functions. I have a Checklist and RadioItems below. I want to increase the blank space between the icon and the text. I have hard-coded some space in the bottom rows below, but is there a way to incorporate this into the ClassName or style parameters?

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)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([html.Label('Item', style={'paddingTop': '2rem', 'display': 'inline-block'}),
                 dcc.Checklist(
                     id='Cats',
                     options=[
                         {'label': 't', 'value': 't'},
                         {'label': 'y', 'value': 'y'},
                         {'label': 'f', 'value': 'f'},
                         {'label': 'j', 'value': 'j'},
                         {'label': 'k', 'value': 'k'},
                         {'label': ' s', 'value': ' s'},
                     ],
                     value=['t', 'y', 'f', 'j', 'k', ' s'],
                     labelStyle = {'display': 'block'},
                     style = { "overflow":"auto", 'margin-right': '50px'}
                 ),

                 html.Label('Type', style={'paddingTop': '2rem', 'display': 'inline-block'}),
                 dcc.RadioItems(['A', 'B', ' C'], 'Scatter',
                            inline=True),
                 ], width=2),
        dbc.Col([
            html.Div(dcc.Graph())
        ], width=5),
    ],
    className = "four columns vstack gap-2 h-75",
    style = {'padding':'2rem'}
    )
], fluid=True)

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

Intended output: I've hard-coded intended space in the final item for both the checklist and radioitem. I'm hoping to pass a function that will do this.

enter image description here

Edit 2: Uneven text length:

values = ['t', 'y', 'f', 'j', 'k', ' s']
options = []

radio_values = ['Aa','Bbbbb','Ccc']
radio_options = []

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

for i in radio_values: 
    radio_options.append({'label': html.Div(i,style={"display": "inline", "padding-left":"0.5rem"}),'value': i})

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([html.Label('Item', style={'display': 'inline'}),
                 dcc.Checklist(
                     id='Cats',
                     options=options,
                     value=values,
                     labelStyle = {"width":"3rem"},
                     style = {'display': 'flex'}
                 ),

                 html.Label('Type', style={}),
                 dcc.RadioItems(radio_options,'A', labelStyle= {"width":"3rem"}, style = {'display': 'flex'}),
             ], width=5),
        dbc.Col([
            html.Div(dcc.Graph())
        ], width=5),
    ],
    className = "four columns vstack gap-2 h-75",
    style = {'padding':'2rem'}
    )
], fluid=True)


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

Solution

  • You can use html.Div as a lebal and style as you prefer, something like below:

    {'label': html.Div(i, style={'font-size': 15, 'padding-left': 10}), 'value': i}
    

    Also, you need to change the label style to flex:

    labelStyle = {'display': 'flex'}
    

    I optimized the code a little below:

    values = ['t', 'y', 'f', 'j', 'k', ' s']
    options = []
    
    radio_options = []
    
    radio_values = ['A','B','C']
    
    for i in values: 
        options.append({'label': html.Div(i, style={'font-size': 15, 'padding-left': "0.5rem"}), 'value': i})
        
    for i in radio_values: 
        radio_options.append({'label': html.Div(i,style={"display": "inline", "padding-left":"0.5rem"}),'value': i})
    
    app.layout = dbc.Container([
        dbc.Row([
            dbc.Col([html.Label('Item', style={'paddingTop': '2rem', 'display': 'inline-block'}),
                     dcc.Checklist(
                         id='Cats',
                         options=options,
                         value=values,
                         labelStyle = {'display': 'flex'},
                     ),
    
                     html.Label('Type', style={'paddingTop': '3rem'}),
                     dcc.RadioItems(radio_options,'A', labelStyle= {"margin":"1rem"},style = {'display': 'flex'}),
                     ], width=5),
            dbc.Col([
                html.Div(dcc.Graph())
            ], width=5),
        ],
        className = "four columns vstack gap-2 h-75",
        style = {'padding':'2rem'}
        )
    ], fluid=True)
    

    Output:

    enter image description here

    Please feel free to change the padding as you would.