英文:
Insert space and wrap text in dbc checklist - dash
问题
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)
英文:
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)
答案1
得分: 1
这是您提供的代码段的翻译部分：
我对Dash还不太熟悉，但是如果我将"flex"设置为"labelstyle"并禁用复选框样式，我可以得到预期的结果。
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'})])
请注意，我已经将HTML和Python代码进行了翻译，不包括具体的功能和解释。
英文:
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'}
)
])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论