Problem in Dash Booststrap responsivity sm, md, lg, xg

Dash Python
1

Hi guys,

As I’m relatively new in the Web development world, I started to care about the responsivity of my web applications and to help me on this mission, I’m using the amazing Dash Bootstrap Component and trying to set specific sizes for each layout size, but it seems that it’s not being recognized by the browser/CSS (i don’t know)

It only recognizes two different values, in general, the values in lg and md;

Am I doing something wrong or missing something?

I built a reproducible example only to show the bug… I will be very helpful if someone can help me to understand how can I solve it.

# Dash APP
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID]
                )

app.layout = html.Div(
    [
        dbc.Row(dbc.Col(html.Div("A single column",
                                 style={"height": "150px", "background": "yellow", "color": "black", "textAlign": "center", "fontSize": "25px"}),
                        sm={"offset": 3, "size": 6},
                        md={"offset": 2, "size": 8},
                        lg={"offset": 1, "size": 10})
                ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns",
                                 style={"background": "white", "margin": "16px 0", "height": "100px", "fontSize": "32px", "color": "black"}),
                        xs=12, width=10, md=6, lg=4),
                dbc.Col(html.Div("One of three columns",
                                 style={"background": "white", "margin": "16px 0", "height": "100px", "fontSize": "32px", "color": "black"}),
                        xs=12, width=10, md=6, lg=4),
                dbc.Col(html.Div("One of three columns",
                                 style={"background": "white", "margin": "16px 0", "height": "100px", "fontSize": "32px", "color": "black"}),
                        xs=12, width=10, md=6, lg=4),
            ]
        ),
    ]
)


if __name__ == '__main__':
    app.run_server(debug=True)
2

The problem is when you run the app and use e.g. the inspector to view on a small device you see something like this right?

image

The reason for this is that mobile devices actually secretly lie about their size, so you need one extra ingredient which is to add a <meta> tag to your header (you can read more here and here). Fortunately this is super easy with Dash.

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.GRID],
    meta_tags=[
        {
            "name": "viewport",
            "content": "width=device-width, initial-scale=1, maximum-scale=1",
        },
    ],
)

With that change, running your app again I see

image
image458×668 18.3 KB

As a final note, width and xs actually control the same thing, if you set both then xs take precedence. The duplication is because sometimes people don’t care about breakpoints in which case width is simpler to understand, but just beware that when you set xs=12, width=10 the width=10 has no effect.

2 Likes
3

Niice!!! It worked perfect to me, Tom

Thank you very much for your answer!