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.
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)
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:
Please feel free to change the padding as you would.