I'm wondering if it's possible to get a coordinate container to scale in one direction, but overflow in the other while keeping the aspect ratio.
For instance, say I have a really tall view that I want to display on a mobile device (smartphone). Ideally, the width of my coordinate container would scale up to fill the full width of the device, and then the extra height would overflow below and be scrollable.
How would I accomplish this?
But if you set the container to fixed, then you can also use css text to fill the height and widths.
So then you could use width:100%, height:auto, you could also use calc(100%-50px) to position things next to eachother.
height auto probably should keep aspect ratio, it would for images atleast idk about other components, but idk what other components would care for ascpet ratio anyways xd
Note, accidently moving it will remove all text, so might want to use a binding if it happends a lot to you.
Makes sense in theory, but the coordinate container width and height are expecting integers. I get an error when I try to enter strings.
I've tried 100vw, calc(100vw), calc(100%), auto, calc(auto) - all of them produce the same "integer expected" error.
it gives a warning but they should work
Does not seem to change anything for the view:
result with fixed 300x800:
result with fixed 100%xauto
you do not change the default size of the root... only set it to fixed
you have to change ALL the components sizes
Its gonna be quite a lot of work to do this ^^
you can do x and y also like this
I think there may be some misunderstanding of what I'm looking for here. I may have misrepresented what I'm trying to do with the title.
I want the entire view to scale according to the aspect ratio, but always use the width to determine the height, regardless of if the height fits on the device's height or not.
For example, my designed view is 300x800 (300 because that's narrower than every one of my target devices, 800 because that height fits all of the components nicely).
Device #1 is 320x658. I would like the view to be 320x853, instead of 246x658, so that it fits the full width is utilized and then the extra 195 pixels would be scrollable, as demonstrated below:
Device #2 is 768x1024. I would like the view to be 768x2048, instead of 384x1024.
Basically, I have a long vertical coordinate container that I'd like to scale the entire view so that the width is fully taken advantage of, the aspect ratio of my view stays the same, and then the height is whatever it needs to be, according to the width and the aspect ratio, regardless of if that height is more or less than the vertical space available. Overflow would scroll. I'm not trying to scale the individual components to take up the full width.
I have started to make process flow diagrams with flex containers. It takes away a lot of these types of issues. For instance, have a column container that has a vertical stack of different components and containers that are broken up to fit the different elements. I drew all over your screenshot to try to explain what I mean.. I hope it's not too confusing.
Basically:
Yellow - flex containers
Red - component instances (e.g. label, tank, the little blue dots that make up the UV bank)
Blue - coordinate container (used for any more intricate process lines)
@amarks I mocked up a wireframe resource that gives a better idea of what I'm trying to express in my previous post.
Mockup.zip (15.3 KB)
I could definitely make that work here, but this is a rather simple leg of the process that I'm just using as an example. There are more complex parts of the process where this is not realistic. If this is not already possible this "aspectRatioPrecendence" would be an awesome addition to the aspectRatio property (auto, width, height).
I think I've come up with a combination of a single coordinate view wrapped in a flex container to get close enough to what I wanted.
Create the long view, vertical in this case, using a coordinate container. Use a width that is narrower than all target devices to avoid down-scaling issues. Use percent mode with the aspect ratio set to contain the full view. (300:720 in this case) Add overflow as a property to the view and set it to scroll.
Create a second flex column view. Use the same default width and height as the coordinate view.
Add an embedded view linked to the coordinate view to the flex view. Set shrink to 0, grow to 1, and use the defaultViewHeight option (defaultViewWidth for long horizontal views).
Set the overflow for the root container to scroll
This is the result on a 320x658 device:
and on a 768x1024 device:
And one more, longer view (300x1760) for a sanity check:
320x658 device:
768x1024 device:
A creative combination of this technique with 2 breakpoint containers (creating a triple breakpoint) allows me to create screens for mobile devices in portrait (horizontal-scroll) and landscape (vertical-scroll) mode and desktop devices using a single 4:3 (1024x768) screen! That's a huge time-saver.
Or, even simpler yet, just check the viewport size as the third breakpoint to toggle between useDefaultViewWidth and useDefaultViewHeight since those two views are identical.
yes that would have been possible to make with what i showed, but i guess its not so easy if you dont know about css^^
seems you already found a solution
