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

**URL:** <https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493>\
**Category:** Ignition Early Access\
**Created:** [March 20, 2019, 7:38pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493 "2019-03-20T19:38:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ndani](https://avatars.discourse-cdn.com/v4/letter/n/e47774/32.png) [@ndani](https://forum.inductiveautomation.com/u/ndani)\
**Post date:** [March 20, 2019, 7:38pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/1 "2019-03-20T19:38:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [March 20, 2019, 7:44pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/2 "2019-03-20T19:44:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 20, 2019, 8:21pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/3 "2019-03-20T20:21:31Z")

</div>

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](https://www.w3schools.com/css/css3_flexbox.asp) layout system. If you know flexbox well, you can probably solve 80% of layout problems using nothing else.

---

<div class="post-metadata">

**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\
**Post date:** [March 20, 2019, 8:25pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/4 "2019-03-20T20:25:14Z")

</div>

To add on @paul-griffith’s comment; another good read on flexbox is [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 20, 2019, 8:36pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/5 "2019-03-20T20:36:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tyrel.parker](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@tyrel.parker](https://forum.inductiveautomation.com/u/tyrel.parker)\
**Post date:** [August 25, 2020, 5:47pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/6 "2020-08-25T17:47:06Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/ac437d32a22d68e0bed0bb275d7a1b33cda3b3b2.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [August 25, 2020, 5:49pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/7 "2020-08-25T17:49:53Z")

</div>

Set basis to “auto”.

---

<div class="post-metadata">

**Author:** ![tyrel.parker](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@tyrel.parker](https://forum.inductiveautomation.com/u/tyrel.parker)\
**Post date:** [August 25, 2020, 5:51pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/8 "2020-08-25T17:51:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jacque](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jacque/32/3607_2.png) [@Jacque](https://forum.inductiveautomation.com/u/Jacque)\
**Post date:** [September 19, 2020, 9:44am UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/9 "2020-09-19T09:44:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 19, 2020, 2:17pm UTC](https://forum.inductiveautomation.com/t/how-to-automatically-size-perspective-window-to-device-application-is-being-accessed/23493/10 "2020-09-19T14:17:55Z")

</div>

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](https://docs.inductiveautomation.com/display/DOC80/Perspective+Design+Principles) we recommend.
