How to trigger Callback if user manually resizes their window

[Phobotics]

Is there a way I can trigger a Standard Callback when the user manually resizes their screen - without them interacting with the Dash App in any other way or refreshing their page?

Currently my Dash App alters its layout based on Screen Size. This is done using standard DBC parameters (xs, sm, md) etc.

Additionally I also have a Client Side Callback that retrieves the actual screen size from the users browser for more in depth layout changes eg. Hiding and Showing elements based on screen size. That Client Side Callback is from this thread:

React get Screen Size

Hello! I would like to share my solution, since I just used this client-side trick. Thanks to @sjtrny ! app.layout = html.Div([ dcc.Location(id='url'), html.Div(id='viewport-container') ]) app.clientside_callback( """ function(href) { var w = window.innerWidth; var h = window.innerHeight; return {'height': h, 'width': w}; } """, Output('viewport-container', 'children'), Input('url', 'href') )

Which looks like this:

The Client Side Callback retrieves the screen size, which I output to the children of an otherwise empty Div. I then use the value of that Div in a standard Callback to hide or show some elements based up the retrieved Screen Size.

The issue I have is that if I manually resize the screen it does not trigger the Normal Callback to alter the layout. That Callback is only triggered upon refresh or otherwise interacting with the app, causing the Clientside Callback to retrieve the screen size again. So if I manually resize the screen and then refresh the layout does alter but the resize by itself triggers nothing.

What I would like to do is make it so a manual screen resize to trigger the Callback that alters the layout. Is this possible?

EDIT: This issue was solved by jinnyzor - and I have outlined a method for implementing it further down the thread.

[jinnyzor]

Hello @Phobotics,

Welcome to the community!

Sure thing, check out this thread for responsive layout:

Responsive legend position

You could use the component I created dash_breakpoints to render the graph with a different layout on different screen sizes

[Phobotics]

Ah thank you very much! I will look into the component mentioned, funny that the thread you reference was only posted yesterday - what a coincidence .

[Phobotics]

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.

[adamschroeder]

Thank you for the very detailed breakdown of your code, @Phobotics .

This is a great learning opportunity for others.

[Alex101]

Thanks for this detailed example! Would be great if this could be incorporated into the core Dash library - I feel like this could have a wide array of uses for developers.