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)
])
The problem is caused by small width values for some Col elements. There is not enough horizontal space left to put elements next to each other which causes the elements to stack.
Basically what is happening is that the left part of the layout in the first tab has a column width of 3 and then the actual content is inside column elements which also have their width set to 3. If you inspect this part of the layout you will see that the width of this container is very small; the width is 1/16 of the row width.
So the solution is to either set the width of the inner most columns to 12 or to just use a regular div, since the outer column already only takes up 1/4 of the row width.