Layout changes with screen size and resolution

Dash Python
1

I designed the web app in a wide screen.But the layouts appear differently in smaller screens. How to keep the layout fixed in all screen sizes.

2

You could try using Dash Bootstrap Components to have control over how your layout appears on different screen sizes https://dash-bootstrap-components.opensource.faculty.ai.

1 Like
3

Thank you.I have also incorporated dbc in the app. Yet, the size of the layout varies based on screen sizes

4

If you’re looking for more flexibility, I suggest you to use tailwind.css

5

Any guidance on how to use tailwind css for dash app?

6

Hi @kirk77,
I recommend using dash-bootstrap-components layout. Design the layout of your app as a series of rows containing columns containing the actual content of the app (see the docs for more details).

With your columns, use the properties

  • width (, optional) : Specify the width of the column. Behind the scenes this sets behaviour at the xs breakpoint, and will be overriden if xs is specified. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.
  • xs (, optional) : Specify column behaviour on an extra small screen. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.
  • sm (, optional) : Specify column behaviour on a small screen. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.
  • md (, optional) : Specify column behaviour on a medium screen. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.
  • lg (, optional) : Specify column behaviour on a large screen. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.
  • xl (, optional) : Specify column behaviour on an extra large screen. Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys ‘offset’, ‘order’, ‘size’. See the documentation for more details.

to define the behavior of the app on screens of various sizes.

Also, use this meta tag when initializing your app (the tag tells the mobile browser that the app has been optimized for mobile devices).

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

I used this setup successfully with this app (have a look on desktop and mobile to compare the behavior). Link to GitHub is includes so you can get inspired if you find it helpful. :wink:

2 Likes