Putting this in here for anyone who needs a solution to a similar problem in future. Or indeed myself when I inevitably forget how to do this and google it again.
As linked by jinnyzor above, install the “dash breakpoints” library: pip install dash_breakpoints
You can see example usage on the libraries Github page in the file “usage.py” however below is how I implemented it (in a simplified example).
Breakdown:
Line 8 of code in image: you create a div (in this case id=“display”) which contains nothing. It only serves as a variable container in dash to hold the output of a users screen size when they initially load the page or change it manually.
Lines 9-13 of code: The dash.breakpoints element that is used specify the breakpoints at which you would like the below Clientside Callback to return meaningful data. In my example “xs” is returned along with the actual screen width if the users screen is below 576px wide. If the users screen is >=576px & <768px then the Client Side Callback returns “sm” and the actual width of the screen.
I have used these particular PX settings in mine because they correspond to the Bootstrap 5.0 breakpoints: Breakpoints · Bootstrap v5.0
As such they should play nicely with the the breakpoints you can use in the Dash Bootstrap Components library.
Lines 17-25 of code: The JS voodoo Clientside Callback magic that makes this all work in conjunction with the dash_breakpoints library. This outputs the name of the breakpoint and width of the users screen to the children of the Div with id=“display” that we created in line 8 of the code. It returns a string that looks like
Breakpoint name: xxl, width: 1668px and stores it in that Div’s children parameter. The actual output depends on the users screen size and what you have called the Breakpoint names in the “widthBreakpointNames” list on line 12.
Lines 28-39 of code: An example callback that uses the display Div’s children as an input, ie the string returned by the above Clientside Callback.
It then spilts the Input string into usable variables “breakpoint_name” and “width”.
Then if the breakpoint_name variable is “xxl” (meaning the users screen is 1400px or larger) it displays the div with id=“example-div” in the Dash App. If it is smaller than 1400px this Data Block is hidden to adjust the app to a smaller screen. To be specific it sets “display” to “None” or “Block” within the ‘style’ parameter of “example-div”.
Bare in mind I did not include “example-div” as an actual div in this full code example as it is just an example to illustrate how you can implement this yourself.
Of course you can use this logic to achieve anything in your app based on screen size, such as having the font size for certain elements change etc.
This allows you to, within Plotly Dash, get the screen size of a user and use it to alter the layout of your dash app whenever they initially load, refresh or manually change their screen size. So it is a solution for how to adjust your layout in complex ways to different devices, mobile, iPad etc. and for manual screen size change.
.
