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)
- RuntimeError: Trying to backward through the graph a second time on loss tensor
- ERROR: post() got an unexpected keyword argument 'proxies'
- How do I automatically fix an invalid JSON string?
- Python generating a list of dates between two dates
- ModuleNotFoundError: No module named 'json'
- Check if string is None, empty or has spaces only
- invalid command name ".!canvas"
- SqlAlchemy: How to make a LONGBLOB column in mysql?
- Validate if input number is prime
- OpenAI remove key access while using AAD authentication
- Converting a Text File to a String in Python
- Problems with repeated draws of Sobol sequence in scipy
- Render NumPy array in FastAPI
- Any faster and memory-efficient alternative of torch.autograd.functional.jacobian(model.decoder, latent_l)?
- Convert integer to string in Python
- starting container process caused: exec: "fastapi": executable file not found in $PATH: unknown
- How to change version of Python in PyCharm
- convert image from CV_64F to CV_8U
- Pyspark new column when otherwise results in "should be a column" error
- FastAPI as a Windows service
- Regex to match a whole number not ending in some digits
- How can I measure the width of a string rendering via tkFont without creating a window first?
- The tilde operator in Python
- 2D stacking and optimizing
- Compute percentage of positive rows in a group_by polars DataFrame
- Extract domain name from URL in Python
- How to use AssertRaisesMessage() in Django tests
- Langchain ChatOllama always produces invalid format: expected "json" error
- Python client library for Language Server Protocol (LSP)
- How can I convert a python urandom to a string?