【发布时间】：2020-06-23 13:03:14
【问题描述】：
我正在开发仪表板。我正在使用一些dash_bootstrap_componentsInputGroup。这是我到目前为止所做的：
我想垂直对齐InputGroup 的InputGroupAddon 'prepend' 和InputGroupAddon 'append'，类似于：
我想拉伸 dbc.InputGroupAddon 'prepend' 和 dbc.InputGroupAddon 'append' 宽度，并让 dbc.Input 自动调整以填充宽度。
我想保持整体宽度为400。
这是我的代码：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Option B',
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'an other unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Some text here',
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'something',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Last option',
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'last unit',
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
我尝试在style 参数下指定'width'，如下所示：
dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend',
style = {'width': 200}),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')
但我明白了：
dbc.InputGroup 在dbc.InputGroupAddon 和dbc.Input 之间断开。
版本信息
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-html-components 1.0.3
【问题讨论】：
-
您可能希望将
style = {'width': 200}指定为style = {'width': '200px'} -
感谢您的建议。刚试了，没用，遇到了和上面一样的问题
-
看起来您需要编写自定义 css 并在 inputAddon 部分中使用
className=<>调用。否则，它将采用标签内文本的默认大小。
标签： python html css plotly plotly-dash