How to automatically size perspective window to device application is being accessed

Hello, is there a way to automatically size perspective window/page to device application is being accessed from. Need to be able to move containers based on pixels available to make better use of system depending on device. If the perspective application is being launched from an Ipad then 2 table side by side should show, but if same application is launched from iphone 6 plus then table 2 should be below table 1, so in other words components should dynamically position them self based on the resolution of the device it is accessed.

Someone probably can explain it a bit better than I can, but it essentially will come down to what type of container your view is made up of. For example a Column Container has breakpoints that allow you to move components to different arrangements depending on which width range the screen falls into.

But I don’t believe there is a way to mae that fully dynamic. It will be based on the configuration of the views.

This is fundamentally a thing that is hard to convey - I know the training department is actively working on some IU videos that will cover this because it’s not an easy concept.
Basically, @grietveld is correct - you control how your components layout by choosing a container appropriately.

A lot of problems with layout have already been solved by the flex container/flex repeater - because all they are is wrappers around the CSS flexbox layout system. If you know flexbox well, you can probably solve 80% of layout problems using nothing else.

1 Like

To add on @PGriffith’s comment; another good read on flexbox is here.

1 Like

The Column Container is another good solution as it allows you to determine how a View will behave at set widths with its breakpoint system.

1 Like

How do you get a flex repeater that is in a flex container to scale to fit the number of items in the flex repeater without using the scroll bar or covering items below it?

Essentially I need the basis px value to change on the flex repeater when a new row is needed in the flex repeater, but there is no metadata from the repeater that tells me how many rows it should be and there is no value to put into the basis to make the flex repeater scale to never need a scroll bar. Works perfectly in a column container but I couldn’t get the column container to scale vertically like I wanted so I am attempting to use the flex container. At least no way that I know of.

image

Set basis to “auto”.

1 Like

Thank you. I did not realize that was an accepted value.

1 Like

is there any guidance with regards to which container types work best for which applications or is it purely a trial and error approach until you find what works?

I highly recommend looking at the QuickStart project we unveiled during ICC. It gives a great breakdown of the different container types and how they should be used. I’m not in a position where I’m able to locate the project right now but I’ll attempt to upload it here later in the day. IN the meantime, you should also look at the Design Principles we recommend.