I’m not perfectly sure how to put this but when I add one tall object (such as a chart) to a row, everything in the following rows goes all the way to the bottom of the row above. This picture provides a pretty clear explanation of what is happening. The dropdown should be right under the label but because the chart is in the same row as the label it’s not.
Here is my code for the formatting.
import pandas as pd
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
app = JupyterDash(name,
external_stylesheets=[dbc.themes.FLATLY])
app.layout = html.Div([
# Row 1 - header
dbc.Row(
[
dbc.Col(html.H1(“Comparing student debt cancellation to a budget equivalent UBI”,
style={‘text-align’: ‘center’, ‘color’: ‘#1976D2’, ‘fontSize’: 50}),
width={‘size’: 8, ‘offset’: 2},
),
]),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
dbc.Row(
# Row 2 - Label Chart and Chart
[
dbc.Col(html.Label(['Select Chart:'],style={'font-weight': 'bold',
"text-align": "center",
'fontSize':20, 'marginRight':100}),
width={'size': 3, 'offset': 1}),
dbc.Col(dcc.Graph(id='pie_chart1', figure={}),
width=8, lg={'size': 6, "offset": 0}
),
]),
dbc.Row(
# Row 3 - Dropdown Chart
[
dbc.Col(dcc.Dropdown(
id='chart-choice',
options=[
{'label': 'Percent with education debt', 'value': 'percent'},
{'label': 'Average education debt', 'value': 'mean'},
{'label': 'Percent better off with education debt cancellation over UBI', 'value': 'better_off'}
],
value='percent',
style={'width':"50%"}),
width={'size': 4, "offset": 1}
),
]),
html.Br(),
html.Br(),
dbc.Row(
# Row 4 - Label Demographic
dbc.Col(html.Label(['Select Demographic:'],style={'font-weight': 'bold',
"text-align": "center",
'fontSize':20, 'marginRight':100}),
width={'size': 3, 'offset': 1}),
),
dbc.Row(
# Row 5 - Dropdown Demographic
[
dbc.Col(dcc.Dropdown(
id='demo-choice',
options=[
{'label': 'Race', 'value': 'race'},
{'label': 'Education', 'value': 'education'},
{'label': 'Age', 'value': 'age'},
{'label': 'Income', 'value': 'income'},
{'label': 'Networth', 'value': 'networth'},
{'label': 'Poverty Status', 'value': 'poor'}
],
value='race',
style={'width':"50%"}
),
width={'size': 4, "offset": 1}
),
dbc.Col(
),
], no_gutters=True
),
dbc.Row(
[
]
)
])
app.run_server(mode=‘external’)