【发布时间】：2021-10-15 05:42:10
【问题描述】：
我正在尝试构建我的第一个 dash 应用程序并希望使用 dbc.Col 和 dbc.Row 来组织事物。我正在尝试在名为“Equity Risk”的第一个选项卡部分中构建一些看起来像这样的东西......
不幸的是，第一个选项卡上返回的所有内容都是 3 个垂直堆叠的项目，每个项目都占据了整个屏幕的宽度。
到目前为止，这是我的代码 - 我不确定这是否足以诊断问题，但希望如此。我已经仔细检查了括号/括号，为每一列添加了宽度参数，并在谷歌上搜索了类似的东西，但仍然无法判断出什么问题。任何帮助将不胜感激！
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
auth = dash_auth.BasicAuth(app,USERNAME_PASSWORD_PAIRS)
server = app.server
# app layout
app.layout = html.Div([
# header banner with titles
html.Div(
children=[
html.H1('COMPANY NAME',
className="header-company-name"),
html.P('HISTORICAL EARNINGS SPREAD ANALYSIS', #'Historical earnings spread analysis',
className='header-page-name')
],
className="header-banner"
),
dcc.Tabs([
# THIS IS THE TAB THAT I'M TRYING TO ORGANIZE, BUT HAVE PROBLEMS WITH
dcc.Tab(label='Equity Risk', children=[
dbc.Container([
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col([
# user inputs and submit button
html.Div([
html.Div([
html.Div(children='User inputs',
className='block-title'),
html.Div(children='', className='title-line'),
html.Div(children='Enter a start and end date:',
className='input-title'),
dcc.DatePickerRange(id='my_date_range',
min_date_allowed=df.date.min(),
max_date_allowed=df.date.max(),
start_date=datetime(2007,1,1),
end_date=datetime.today()
)
],
),
html.Div(
children=[
html.Button(id='submit_button',
n_clicks=0,
children='Submit Inputs',
className='button')
],
)
],
# style={'width': '20%', 'display': 'inline-block', 'verticalAlign':'top'},
className='utilities-block'
)
], width=3)
]),
dbc.Row([
dbc.Col([
# checkbox
html.Div(
children=[
html.Div(children='Plot Adjustments',
className='block-title'),
html.Div(children='', className='title-line'),
dcc.RadioItems(id='plot_lines',
options=[
{'label':'Show mean and \u03C3 lines', 'value':'meanstd'},
{'label':'Show standard grid', 'value':'grid'}
],
value='meanstd',
labelStyle={'display':'block'},
inputClassName='radio-input',
labelClassName='radio-label')
],
# style={'width': '20%'},
className='utilities-block'
)
], width=3)
])
], width=3),
dbc.Col([
# graph
html.Div(
children=[
html.Div(children='Equity risk premium mainly between 15yr mean and -1\u03C3 in recent months',
className='block-title'),
html.Div(children='', className='title-line'),
dcc.Graph(id='my_graph',
figure=updated_figure,
style={'height': '83%'},
className='content-block')
],
# style={'width': '72%', 'display': 'inline-block', 'verticalAlign':'top', 'height':'450px'},
className='utilities-block'
)
], width=9)
]) # end of row
], fluid=True)
], style=tab_style, selected_style=tab_selected_style),
# IGNORE THIS TAB.. I HAVEN'T STARTED DOING ANY GRID LAYOUT YET
dcc.Tab(label='S&P vs P/E Ratio', children = [
html.Div(
children=[
html.Div(children='Spread between S&P price and P/E ratio is widening',
className='block-title'),
html.Div(children='', className='title-line'),
dcc.Graph(id='my_sp_pe_graph',
figure=sp_pe_figure,
style={'height': '90%'},
className='content-block')
],
style={'width': '75%', 'display': 'inline-block', 'verticalAlign': 'top', 'height': '550px',
'paddingLeft': '20px'},
className='utilities-block'
)
], style=tab_style, selected_style=tab_selected_style),
# dcc.Tab(label='Something Else', style=tab_style, selected_style=tab_selected_style)
], style=tabs_style)
])
【问题讨论】：
标签： plotly-dash dash-bootstrap-components