I was wondering if there was a way for the contents in an embedded view to scale based on the screen size.
This embedded view is using coordinate container view.
It would be like how percent mode works in coordinate container. Except, instead of every component scaling, the view itself scales like it was an image.
I want to eliminate having to scroll if the screen is smaller than the view size. I would like it to scale like its an image based on the screen size.
Thanks
im not sure what the goal is.
but you can use vh and vw
or a comboination of % and vh vw with calc
to apply such width/height values you need to be in fixed mode (as percentage mode changes everything to a number)
Below is a photo of the problem:
If using a screen that is small enough, the contents goes over and you have to scroll to view the rest.
The goal is that instead of having the scroll bar, the screen shrinks to accommodate the smaller screen size.
I know there is a percent mode with the coordinate container, however the components scale where nothing is lined up anymore.
I would like it to scale as if it was an image if that makes sense.
This may help
The problem is, when I try that, it looks like this:
It may be a problem with how the screen was designed
Labels do not scale. If you want them to then use an SVG as outlined in this post,
Doesnt look like its just the labels, the pumps are way to small too.
@Mitchell_Lagenour
You have more options to scale though, if you set it to percent and fill in the aspect ratio, maybe you have a bit better results
Also @jlandwerlen, as i stated in the solution in the topic you linked, its really not a solution and more a work around xd
I wouldnt advice to put the text inside the svg, its way to bothersome, instead you should put a lineheight, or overflow on the labels. (and mayb a hover effect to show the full text on hover?)
I am not having any luck with the aspect ratio.
Is there a better way to design this type of layout that scales with the screen size better?
Maybe don’t use an embedded view. Looking at your example, I’m not sure using an embedded view is the best approach.
I have had very good luck using a coordinate container and the aspect ratio.
