How to make your dash app layout design responsive?

Dash Python
1

Hello all,

As the title says, I am looking for a way to make my dash app layout responsive…

Recently, I have been working on a dash project and wanted to test how it is seen on different devices before polishing final details. To do that, I used “Enter Responsive Design Mode” of Safari browser and experimented with different devices/screen sizes. As it turns out, my app is NOT responsive at aall :scream:

Here I am hoping to take some tips, recommendations and/or resources to convert my app into a fully responsive (handsome) app.

If it makes any difference, I mainly used Dash Matinee Components on my app.

PS: I know it is not a directly a dash question rather a CSS one, and sorry for that!

2

Hi @Berbere

What part of the app layout is not responsive? Are you using the dmc.Grid and/or the dmc. MediaQuery components?

3

Hey @AnnMarieW,

I guess the main container/division that contains all the app components…
Here is the simplified version of my app layout, maybe it would make things easier for you.

app.layout = dmc.MantineProvider(
    theme={"colorScheme": "dark"},
    withGlobalStyles=True,
    children=[
        #Header   
        html.Div(viz_tools.set_header(app.get_asset_url("yahoo_fantasy_icon.png"))),
        #Tabs
        html.Div(className='Tabs',  children=[
            dmc.Tabs(
                [  
                dmc.TabsList(
                    [
                        dmc.Tab("Team-wise", value="Team"),
                        dmc.Tab("Player-wise", value="Player"),
                    ]
                ),
                #Tab1
                dmc.TabsPanel(
                    [
                    viz_tools.tab1_layout
                    ], value="Team"),
                #Tab2
                dmc.TabsPanel(
                    [
                    viz_tools.set_team_logos_container(team_logos),
                    viz_tools.tab2_layout(app.get_asset_url(f"nba_players/{2544}.png"))
                    ], value="Player",),
                ],
                color="violet",
                orientation="horizontal",
                value="Team",
            )
        ],
        )
    ]

Both tab1_layout and tab2_layout are dmc.Grid component.

To be honest, I have never heard dmc.MediaQuery before. Is it more convenient then dmc.Grid?

4

What you posted isn’t actually helpful because there is no content. The dmc.Grid should be responsive. How are you using it?

5

What you are looking for are xs, sm, md, lg and xl parameters of dmc.Col that are inserted in dmc.Grid. If it is not workikg for you we would need to see more code as AnnMarie noted.

You can get some sense how it works from mantine documentation

6

Hey @martin2097,

Thank you for your reply. Is there any way to make gutters smaller than gutter = 'xs' ?

cheers!

7

Did you try setting it to 0px ?

  • gutter (number; optional):
    Spacing between columns predefined value from theme.spacing or
    number for gutter in px.
1 Like
8

Thank you Ann!

Ahh, I somehow miss that gutter also excepts integer arguments…

Cheers!

1 Like