I have a question regarding the best approach for designing a Perspective view for different screen sizes.
Currently, I'm using a Coordinate Container with multiple Embedded Views, which gives me the flexibility to reposition the components whenever the layout needs to change.
The difficulty is making the same layout work across desktop, laptop, and tablet. On smaller screens, scrollbars appear inside some of the Embedded Views.
Ideally, I want the components to resize and reposition responsively based on the available screen size, while preserving the overall arrangement and without stacking or creating internal scrollbars.
What would be the ideal container/view structure for this? Is there a recommended way to make the Embedded Views and their contents respond to screen size while still keeping the flexibility of a Coordinate Container?
Thank you , I’ll look into the Pan and Zoom component as well. I’ll also test whether the process layout can be achieved using Flex containers while still preserving the required positioning.
The Coordinate Container is currently placed inside a Flex Container. I’ll try changing the Coordinate Container to percent mode and see how it behaves.
The Coordinate Container is already within a Flex structure. The Main Shell, sidebar, Main Content and Dashboard Content are all using Flex Containers, with the Coordinate Container inside the Dashboard Content.
The individual process blocks are separate Embedded Views placed within the Coordinate Container. The reason for this is to keep the process layout dynamic, so the blocks can be easily repositioned based on changes to the factory process flow while maintaining the required visual representation.
There are probably sub-components that have minimum sizes that make it impossible for it all to fit, so you would need to make them capable of being smaller, and make sure their basis is flexible. Embedded views should not have "useDefaultViewWidth/Height" checked and their basis should be grow/shrink 1.
You could try embedding your coordinate container as an embedded view then under style add 'zoom' : 75% and it'll shrink it. Could play around with a binding on zoom to handle the screen scaling though I'd probably suggest to do it in an advanced style sheet so you can set a minimum as well. If I remember right dropdowns dont work well with zoom but maybe it'll be a start to give you some ideas.
/* apply style class "viewZoom" to the embedded view or its root container */
.psc-viewZoom { zoom: 1; }
@media (min-width: 3000px) { .psc-viewZoom { zoom: 2; } } /* 4K */
@media (max-width: 600px) { .psc-viewZoom { zoom: 0.5; } } /* phone */
Another alternative is to use a breakpoint container, using your original coordinate container on the large breakpoint, and smaller, more flexible objects below the breakpoint.
This method permanently adds a lot of work (double the screens to maintain ), so I avoid it, but sometimes the extra work is necessary to meet the specifications.
That sounds like a good approach for what I’m trying to achieve. I need to preserve the same process layout across desktop, laptop, tablet and phone rather than rearranging the process blocks for smaller screens. I’ll try embedding the coordinate container as a view and scaling the whole view using zoom, then test how the embedded components behave at different screen sizes. Thank you
I was considering this approach as well. My concern is the additional maintenance, especially since the process layout can change over time and the same layout needs to be reflected across different screen sizes. I’ll keep the breakpoint approach as an option if scaling the same coordinate layout doesn’t work reliably.
That could be part of the issue I’m seeing, as some of the embedded views start showing scrollbars when the available space gets smaller. I’ll check the default view width/height settings and make sure the embedded views are allowed to grow and shrink rather than keeping a minimum size. I’ll test this together with the scaling approach.
For some more context, this is the exact layout I need to preserve across all screen sizes.
The dashboard uses a Coordinate Container, with the individual process blocks as Embedded Views. Their positions represent the actual process/factory flow, so I don't want the blocks to stack or rearrange when moving between desktop, laptop, tablet and phone.
The goal is for this exact layout to proportionally scale up or down to fit the available screen while maintaining the same relative positions of all the process blocks.
Ideally, I would like to maintain only one layout, since the process flow can change and the Embedded Views may need to be repositioned in the future.
Would embedding the complete Coordinate Container as a single Embedded View and scaling that outer view using zoom/media queries be a suitable approach for this?
That is way too much text and information to reasonably expect to fit on a single phone screen. Even if you did get it all to fit the text would be too small to be useful.
Pick a minimum resolution width specification, make it work to that specification, and it will automatically scale up from there. Be sure all users understand the minimum screen width specification, otherwise the complaints will be endless.
Personally I would break this up into two projects, one for desktop and a high resolution tablet, the other for mobile.
Otherwise you will be fighting this issue until the end of time.
