Configure app layout when adjusting screen size - dash
I've tried to set the max height/width on dbc components within an app but when adjusting the screen size, the layout changes. Is there a way to make the layout more flexible to ensure the same configuration when adjusting the screen size.
With below, output 1 is what is expected. When adjusting the screen size smaller (output 2), the layout changes. Is it possible to maintain the same layout as output 1?
Is it also possible to make the cards the exact same size?
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
navbar = html.Div(children=[
html.Div(children=[
html.H3('NavBar', style = {'color':'white', 'fontSize': 30, 'textAlign':'center'}),
], className = "four columns vstack gap-2 h-75",
style = {'padding':'2rem'}
)
])
banner = dbc.Card(
dbc.CardBody(
[
html.H1('xxxx'),
html.H5('xxxx')
],
),
className='text-center bg-secondary text-light border border-3 align-self-center'
)
card = dbc.Card(
[
dbc.CardHeader("Header", className="lead"),
dbc.CardBody(
[
html.P("x", className="card-text"),
],
),
], className = "border border-3 text-center m-4 mw-50",
style={'height':'75%', "verticalAlign": "bottom" }
)
app.layout = dbc.Container([
dbc.Row(banner),
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col(html.Div(navbar), className = 'bg-secondary border border-3 h-50'),
]),
],
),
dbc.Col([
dbc.Row([
dbc.Col(card),
dbc.Col(card),
]),
dbc.Row([
html.Button('Button',
style={'font-size': '14px', 'width': '200px', 'height': '40px', 'display': 'inline-block',
'margin-top': '0px', 'margin-left': '525px',
'horizontalAlign':'right', 'verticallAlign':'top'
}
),
]),
dbc.Row([
dbc.Col(dcc.Graph(), style={
"height": "50%",
"padding-top": "10px",
"padding-bottom": "10px",
}),
]),
dbc.Row([
html.Button('Button',
style={'font-size': '14px', 'width': '200px', 'height': '40px', 'display': 'inline-block',
'margin-top': '20px', 'margin-left': '525px',
'horizontalAlign':'right', 'verticallAlign':'top'
}
),
]),
dbc.Row([
dbc.Col(dcc.Graph(), style = {
'height': '50%',
"padding-top": "10px",
"padding-bottom": "10px",
}),
]),
], width = 4
),
dbc.Col([
dbc.Row([
dbc.Col(card),
dbc.Col(card),
dbc.Col(card),
]),
dbc.Row([
html.Button('Button',
style={'font-size': '14px', 'width': '200px', 'height': '40px', 'display': 'inline-block',
'margin-top': '0px', 'margin-left': '700px',
'horizontalAlign':'right', 'verticallAlign':'top'
}
),
]),
dbc.Row([
dbc.Col(html.Div(dcc.Graph()), style = {
'height': '100%',
"padding-top": "10px",
}
),
],
),
], width = 5
),
])
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=True, port = 8050)
Output 1:
Output 2 (smaller):
Output 3:
Solution
I think you should use xs, md, lg to arrange your Col. Please refer below code:
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
navbar = html.Div(children=[
html.Div(children=[
html.H3('NavBar', style = {'color':'white', 'fontSize': 30, 'textAlign':'center'}),
], className = "four columns vstack gap-2 h-75",
style = {'padding':'2rem'}
)
])
banner = dbc.Card(
dbc.CardBody(
[
html.H1('xxxx'),
html.H5('xxxx')
],
),
className='text-center bg-secondary text-light border border-3 align-self-center'
)
card = dbc.Card(
[
dbc.CardHeader("Header", className="lead"),
dbc.CardBody(
[
html.P("x", className="card-text"),
],
),
], className = "border border-3 text-center m-4 mw-50",
style={'height':'75%', "verticalAlign": "bottom" }
)
app.layout = dbc.Container([
dbc.Row(banner),
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col(html.Div(navbar), className = 'bg-secondary border border-3 h-50'),
]),
],xs = 2, sm=2, md=2, lg=2
),
dbc.Col([
dbc.Row([
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
], justify="center"),
dbc.Row([
dbc.Col([
dbc.Button('Button',size='sm', color='dark')
], width={'size':6}, style={'text-align':'right'}),
dbc.Col([
dbc.Button('Button',size='sm', color='dark')
], width={'size':6}, style={'text-align':'right'})
]),
dbc.Row([
dbc.Col([
dcc.Graph()
], width={'size':6}),
dbc.Col([
dcc.Graph()
], width={'size':6}),
]),
dbc.Row([
dbc.Col([
dbc.Button('Button',size='sm', color='dark')
], width={'size':6}, style={'text-align':'right'}),
]),
dbc.Row([
dbc.Col([
dcc.Graph()
], width={'size':6}),
])
],xs = 10, sm=10, md=10, lg=10)
])
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=False, port = 8056)
Full screen:
Resize:
Hope this help.
Updated answer:
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
navbar = html.Div(children=[
html.Div(children=[
html.H3('NavBar', style = {'color':'white', 'fontSize': 30, 'textAlign':'center'}),
], className = "four columns vstack gap-2 h-75",
style = {'padding':'2rem'}
)
])
banner = dbc.Card(
dbc.CardBody(
[
html.H1('xxxx'),
html.H5('xxxx')
],
),
className='text-center bg-secondary text-light border border-3 align-self-center'
)
card = dbc.Card(
[
dbc.CardHeader("Header", className="lead"),
dbc.CardBody(
[
html.P("x", className="card-text"),
],
),
], className = "border border-3 text-center m-4 mw-50",
style={'height':'75%', "verticalAlign": "bottom" }
)
app.layout = dbc.Container([
dbc.Row(banner),
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col(html.Div(navbar), className = 'bg-secondary border border-3 h-50'),
]),
],xs = 2, sm=2, md=2, lg=2
),
dbc.Col([
dbc.Row([
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
dbc.Col(card, width={'size':2}),
], justify="center"),
dbc.Row([
dbc.Col([
dbc.Button('Button',size='sm', color='dark')
], width={'size':6}, style={'text-align':'right'}),
dbc.Col([
dbc.Button('Button',size='sm', color='dark')
], width={'size':6}, style={'text-align':'right'})
]),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
dbc.Row([
dcc.Graph(style={'height':400}),
]),
dbc.Row([
dbc.Col([
dbc.Button('Button',size='sm', color='dark'),
], width={'size':12}, style={'text-align':'right'}),
]),
dbc.Row([
dcc.Graph(style={'height':400})
]),
]),
]),
],xs = 6, sm=6, md=6, lg=6),
dbc.Col([
dbc.Card([
dbc.CardBody([
dbc.Row([
dbc.Col([
dcc.Graph(style={'height':835})
], width={'size':12}),
])
])
])
],xs = 6, sm=6, md=6, lg=6)
])
],xs = 10, sm=10, md=10, lg=10)
])
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=False, port = 8056)
- Activating Anaconda Environment in VsCode
- How to implement the Softmax function in Python?
- Dataframe - Select the minimum set of rows to cover all possible values of each columns
- Non-equi join in polars
- Tkinter and matplotlib - NavigationToolbar2Tk - cursor position precision
- Media Image is not loaded in the output of Django Project
- selenium upload part not working on windows. Path related?
- How to encode UTF8 filename for HTTP headers? (Python, Django)
- Split columns in Csv file
- In the Django admin site, how do I change the display format of time fields?
- Condition in pytest fixture depending on some test-suite results
- How to make a class JSON serializable
- Apache Airflow unit and integration test
- TypeError: 'MultiPolygon' object is not iterable with Plotly Choropleth
- How do I get the current time in milliseconds in Python?
- Python: Decoding base64 encoded strings
- How to fix the error when try to plot data with pandas?
- Python Image - Finding largest branch from image skeleton
- Enumerate is Returning A None Type
- Python finite difference functions?
- How to extract hex color codes from a colormap
- Regex: Get "London, UK" from "Evolution Recruitment (Agency) (London, UK)"
- Visual Studio Code - How to add multiple paths to python path?
- What are the Spark transformations that causes a Shuffle?
- How to find the second lowest lists into a nested list by their second value?
- python-docx: Parse a table to Panda Dataframe
- Deposit and Withdraw on Account
- Why does this code snippet give the error list object is not callable?
- How to find out if argparse argument has been actually specified on command line?
- Print current call stack from a method in code