[英]Plotly Dash: dcc.RadioItems vertical alignment
I would like to align vertically all options of a dash_core_components.RadioItems
.我想垂直对齐
dash_core_components.RadioItems
的所有选项。
According to the dash documentation , the default behavior should include a vertical alignment of the RadioItems
options.根据破折号文档,默认行为应包括
RadioItems
选项的垂直 alignment。 If you wanted to align the options horizontally, you would have to specify:如果要水平对齐选项,则必须指定:
labelStyle={'display': 'inline-block'}
On the contrary, as default behavior I get a horizontal alignment and I don't know what to specify as the display
item to get a vertical alignment of the RadioItems
options.相反,作为默认行为,我得到一个水平 alignment 并且我不知道要指定什么作为
display
项目来获得RadioItems
选项的垂直 alignment。
Here my attempt until now:直到现在我的尝试:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.layout = html.Div([dcc.RadioItems(id = 'input-radio-button',
options = [dict(label = 'A', value = 'A'),
dict(label = 'B', value = 'B')],
value = 'A'),
html.P(id = 'output-text')])
@app.callback(Output('output-text', 'children'),
[Input('input-radio-button', 'value')])
def update_graph(value):
return f'The selected value is {value}'
if __name__ == "__main__":
app.run_server()
What I get:我得到什么:
I would like to get a results like this (image manually edited):我想得到这样的结果(图像手动编辑):
I found this reference where this problem is mentioned.我在提到这个问题的地方找到了这个参考。 There, it is proposed to solve it by referring to an external stylesheet.
在那里,建议通过引用外部样式表来解决它。 I would like, if possible, to avoid this turnaround and solve it by specifying the correct option within the definition of the
RadioItems
element.如果可能的话,我想通过在
RadioItems
元素的定义中指定正确的选项来避免这种转变并解决它。
Version info:版本信息:
Python 3.7.0
dash 1.12.0
plotly 4.7.0
You can pass the labelStyle={'display': 'block'}
property to dcc.RadioItems()
in order to vertically align the different options, but I suggest that you follow the recommendation in the Dash Community Forum, which is to always link the Dash CSS file bWLwgP.css
.您可以将
labelStyle={'display': 'block'}
属性传递给dcc.RadioItems()
以垂直对齐不同的选项,但我建议您遵循 Dash 社区论坛中的建议,即始终链接破折号 CSS 文件bWLwgP.css
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.