I have this view configured in perspective. Every page has a coordinate container that contains many flex container. Every flex container holds a component. I move the flex container to move the components. The mode of the root container is set to percent so that it fits in all the screen size. The mode on the coordinate container is set to fixed because if I choose percent then the components move away from each other. By choosing fixed it stays intact but the issue is on every view the position of the components varies. The components also does not shrink/expand based on the screen resolution. Any suggestion on how to configure the view so that it adapt the screen size. Below are few screenshots from various devices.
Have you tried using only Flex containers for this view?
Unless you are using a resource that requires an XY (ie raster image), a Flex container with components setup to Grow/Shrink appropriately is the default container type to use for most views of this nature:
In the earlier images, at the root, there is coordinate container and below that a multiple component is kept in a each multiple flex containers.
I cannot use the flex container at the root as it does not allow to align one component with another. In the below image, a flex container is added at the root and then another 2 flex containers below. In "Flex Container" a pump and a cylindrical added tank but it does not allow to make the design that I am looking for.
You should still consider adjusting the components you are using to work in embedded flexes.
does not allow to make the design that I am looking for.
I am guessing you're alluding to the Pump not touching the edge of the component container it exists in, so it has this padding-like appearance that makes it "stop touching" the tank.
While the Symbols are nice I am not sure you can stop the aspect ratio from being maintained, you could instead have an SVG of a pump that does not preserveAspectRatio ( = none , or an appropriate value for the direction you want).
