Layout Browser Settings

Team - Hope you all doing good.

We have built Multi Pages App, which contains 6 pages, each page will have different reports. The problem we are facing currently is, we have built this App with 50% screen resolution to view all plots in a single window without scrolling, it is working fine with this 50% resolution. But when we send this same App to other person for review, their browser settings are 100% and hence the App layout appearance is completely distorting. Is there any way to change the browser settings in the script which should control the browser settings and automatically adjust the dashboard to the screen resolution to 50% to avoid the distortions across people.

Thanks,
vJ

There is a discussion about this here: https://stackoverflow.com/questions/3302988/how-to-set-zoom-level-using-css. I haven’t tested any of those solutions.

However, I recommend redesigining your app so that it looks good on default zoom settings: reduce the font sizes, the margins of the graphs, etc.

1 Like

Thanks a lot for you advise. Will read the discussion and see if something is useful and implement.

1 Like

If I set the size parameters in pixels then it scales with the rest of the page, for example:

dcc.Graph(id=‘graph’,style={‘width’:‘100%’,‘height’:‘600px’}

If I use relative parmeters then part of my graph gets cut off if zooming happens on the browser, for example:

dcc.Graph(id=‘graph’,style={‘width’:‘100%’,‘height’:‘40vh’}

So it’s a good idea to avoid relative scaling in this case.

1 Like

I completely agree with @sparrow here! The same issues of messed up graphics when one uses relative scaling, which is the issue we’re trying to avoid with relative scaling to begin with.