如何解决水平对齐仪表板核心组件
我想水平对齐两个下拉菜单和一个DatePickerRange。但是使用以下代码:
import dash
import dash_core_components as dcc
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
style_dict = dict(width='100%',border='1.5px black solid',height='50px',textAlign='center',fontSize=25)
app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),# placeholder
html.Div(style={'width': '2%','display': 'inline-block'}),html.Div(
dcc.Dropdown(
id = 'start_hour',options = [{'label': i,'value': i} for i in list(range(0,24))],style=style_dict,),style={'width': '20%',html.Div(
dcc.DatePickerRange(
id='date_picker_range',style=style_dict
),style={'width': '14%','display': 'inline-block','fontSize': 20}),html.Div(
dcc.Dropdown(
id = 'end_hour',style=style_dict
),])
if __name__ == '__main__':
app.run_server(debug=False,use_reloader=False)
我有这个布局:
如果我放大了,我得到了:
无论我如何放大或缩小,是否都可以强制组件在顶部边缘对齐?
作为浏览器,我使用Firefox。
解决方法
我遇到了与您所描述的问题类似的问题。我正在创建一个如下所示的仪表板:
dcc components without proper alignement
正如您在图片中看到的,我的 dcc 组件及其标题没有正确对齐。我尝试添加样式参数 verticalAlign
,它按我的预期工作。这是添加该样式参数后仪表板的外观:
我附上了我的仪表板布局代码,以便您可以看到我放置提到的参数的位置:
## Dashboard layout
app.layout = html.Div( ## Master div
[
html.Div( ## Dashboard title
[
dcc.Markdown(dash_title)
]
),html.Div( ## Select menus
[
html.Div( ## Stock select
[
dcc.Markdown(dash_stock_sel),dcc.Dropdown(
id="select_stock",options=[{"label": cmp,"value": tickers_base[cmp]["symbol"]} for cmp in tickers_base],value="TSLA"
)
],style={
"display": "inline-block","width": "20%"
}
),html.Div( ## Date select dcc components
[
dcc.Markdown(dash_date_sel),dcc.DatePickerRange(
id="select_dates",min_date_allowed=date(2015,1,1),max_date_allowed=date.today(),initial_visible_month=date(2015,end_date=date.today()
)
],"width": "30%","margin-left": "20px","verticalAlign": "top"
}
),]
),html.Div( ## Stock prices graph
[
dcc.Graph(
id="cstock_graph",figure=stock_graph(def_company,datareader_api,def_start,def_end)
)
]
)
]
)
希望这个回答有帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。