I am trying to build my first dash app and want to organize things using dbc.Col and dbc.Row. I'm trying to build something to look like this in the first tab section called "Equity Risk"...
Unfortunately, all that's returned on the first tab are 3 items vertically stacked on top of each other that each take up the full width of the screen.
This is my code so far - I'm not sure if this is enough code to diagnose the issue, but hopefully it is. I have double-checked the brackets/parenthesis, added width arguments to every column, and have googled similar things and still can't tell what's wrong. Any help would be much much appreciated!
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)
])
