Configure app layout when adjusting screen size – dash

Question:

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:

enter image description here

Output 2 (smaller):

enter image description here

Output 3:

enter image description here

Asked By: Chopin

||
Source

Answers:

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:
    enter image description here

  • Resize:
    enter image description here

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)
Answered By: hoa tran