I am having some trouble to achieve the layout in the image below. What is left is for me is to add those 3 graphs that I included in blue.
So far, I have included everything in 1 row using up all 12 columns:
Col 1: with dropdowns and checklists → width=2 Col 2 → 12: all those cards/boxes on top. Now if I move to create a new row, I will get the graphs to be below the section on the left (so there will be this huge whitespace in the middle).
Col 1 can be bigger or smaller in size depending on the user choice. I want to make it independent, meaning no matter the size of it I want all the rest to be display like I have on the image here.
My simplified code:
layout = dbc.Container([
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader('Portfolio Summary', style={'font-size': 20, 'textAlign': 'center', 'background-color': '#006398', 'color': 'white', 'font-weight': 'bold'}),
html.Label('Region:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
dcc.RadioItems(id='region_radio',
options=[{'label': str(c), 'value': c} for c in sorted(df['Region'].unique())],
labelStyle={'display': 'block'},
inputStyle={'margin-right': '5px'},
style={'margin-left': '10px', 'margin-top': '0px', 'font-size': 15, 'color': 'white'}),
html.Label('Country:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
dcc.Checklist(id='country_checklist', className='checkbox',
value=[],
labelStyle={'display': 'block'},
inputStyle={'margin-right': '5px'},
style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
),
html.Label('City:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
dcc.Checklist(id='city_checklist', className='checkbox',
labelStyle={'display': 'block'},
inputStyle={'margin-right': '5px'},
style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
),
html.Label('Property Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
dcc.Checklist(id='property_type_checklist', className='checkbox',
labelStyle={'display': 'block'},
inputStyle={'margin-right': '5px'},
options=[{'label': str(c), 'value': c} for c in sorted(df['Building Type'].unique())],
style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
),
html.Label('Ownership Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
dcc.Checklist(id='ownership_type_checklist', className='checkbox',
labelStyle={'display': 'block'},
inputStyle={'margin-right': '5px'},
options=[{'label': str(c), 'value': c} for c in sorted(df['Ownership Type'].unique())],
style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
),
dbc.Button("Submit", id='submit_button', color="light", className="d-grid gap-2 col-6 mx-auto"),
dbc.Button("Clear All", color="dark", className="d-grid gap-2 col-6 mx-auto", href='/'),
], style={'margin-left': '-10px', 'background-color': '#006398'})
], width=2),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Countries', className='card-title'),
html.P(id='country_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-globe', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
],style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Cities', className='card-title'),
html.P(id='city_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-city', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Properties', className='card-title'),
html.P(id='property_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-building', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Annual Rent', className='card-title'),
html.P(id='rent_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-coins', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=2),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Total Area', className='card-title'),
html.P(id='area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-expand', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Rent/Area', className='card-title'),
html.P(id='rent_area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-money-bill', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Headcount', className='card-title'),
html.P(id='headcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-user', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Deskcount', className='card-title'),
html.P(id='deskcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-couch', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
dbc.Col([
dbc.CardGroup([
dbc.Card(
dbc.CardBody([
html.H6('Cost/Person', className='card-title'),
html.P(id='cost_person_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
])
),
dbc.Card(
html.Div(className='fa fa-user-tag', style=card_icon),
className='bg-secondary',
style={'maxWidth': 55}
)], className='mt-4 shadow')
], style={'margin-top': '-23px'}, width=1),
]),
], fluid=True)
Advertisement
Answer
You can nest rows/cols to get the layout you’re requesting.
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
graph = dcc.Graph(figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization',
},
}, responsive=True, className="h-100")
app.layout = dbc.Container([
dbc.Row([
dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
dbc.Col([
dbc.Row([
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")], width=4)
]),
dbc.Row([
dbc.Col([graph]),
]),
dbc.Row([
dbc.Col([graph]),
]),
], width=5),
dbc.Col([
dbc.Row([
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
dbc.Col([html.Div("header", className="bg-primary")]),
]),
dbc.Row([
dbc.Col([graph]),
], className="h-100"),
], width=5),
])
], fluid=True)
app.run_server(debug=True)
