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)
