# Perspective container grouped objects layout issue

**URL:** <https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843>\
**Category:** Ignition\
**Tags:** perspective, vision\
**Created:** [October 23, 2023, 12:55pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843 "2023-10-23T12:55:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 23, 2023, 12:55pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/1 "2023-10-23T12:55:01Z")

</div>

It seems like Perspective does not have a way to group object together like vision does. When I used Flex Container to group objects, the layout is not the same on different displays or when you zoom in or zoom out.  
Are there ways to make Flex Container objects fixed layout like picture, it will keep the layout the same. I've tried different settings, so far, non of them works.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 23, 2023, 1:03pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/2 "2023-10-23T13:03:39Z")

</div>

> [@Simen\_Minerd](#):
>
> Perspective does not .... like vision does

It doesn't really matter what you have for `....`, because Vision and Perspective are so fundamentally different. Java Swing ≠ HTML5. For visuals, it is that simple.

Where Vision and Perspective are similar is in the data flow of binding and events, from tags and queries and expressions through scripting. That dramatically reduces the adjustment to Perspective for old Vision hands.

That said, it sounds like you want some features of a coordinate container. Nest one and try it. Just remember that the two container types are as opposite and cantankerous together as trying to mix Vision's Anchored and Relative layouts.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 23, 2023, 1:10pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/3 "2023-10-23T13:10:11Z")

</div>

> [@pturmel](#):
>
> two container types are as opposite and cantankerous together as trying to mix Vision's Anchored and Relative layouts

This is why I don't group components in a coord view into sub-coord containers... I want more hair, not less!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 23, 2023, 2:24pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/4 "2023-10-23T14:24:32Z")

</div>

> [@Simen\_Minerd](#):
>
> the layout is not the same on different displays or when you zoom in or zoom out.

That's the whole point of flex containers. So the solution is pretty simple: don't use them.  
Use coordinate containers instead. You can make them behave similarly to flex containers by using percentage values for position and size. It's easier to make a coord container act like a flex one than the opposite, so if you need some things to be flexible in an otherwise fixed layout, use coordinate containers.

---

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 23, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/5 "2023-10-23T15:04:56Z")

</div>

Thanks guys.  
I used lot templates in Vision, it helps to reduce work, and increases productivity.  
Perspective library does not work like Vision Template.  
I F-hate Perspective so far, it limits connections, one edge license only allows 2 connections.  
I am testing using Flex Containers inside a Flex Container that insides another Flex Container, Nest them and do not allow them to grow or shrink to get fix structure of a template layout. So much work to create a simple template.  
I wish there is simple way to create a template.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 23, 2023, 3:14pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/6 "2023-10-23T15:14:51Z")

</div>

> [@Simen\_Minerd](#):
>
> one edge license only allows 2 connections.

That's true of the Vision UI in Edge, too.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 23, 2023, 3:46pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/7 "2023-10-23T15:46:47Z")

</div>

> [@Simen\_Minerd](#):
>
> I am testing using Flex Containers inside a Flex Container that insides another Flex Container, Nest them and do not allow them to grow or shrink to get fix structure of a template layout. So much work to create a simple template.

Well if you're not using the right tools...  
Creating templates in perspective is not more complicated than in vision (frankly I find perspective easier). You just need to get used to the differences.

---

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 23, 2023, 5:01pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/8 "2023-10-23T17:01:33Z")

</div>

What kind of templates did you create? We have many object associate with one equipment; it looks good when you create it on one computer, and drag it in to your main screen with no issue whatsoever, but when people open it from different computer using different displays, the object could scrambled together and un usable.

---

<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:** [October 23, 2023, 5:10pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/9 "2023-10-23T17:10:44Z")

</div>

> [@Simen\_Minerd](#):
>
> but when people open it from different computer using different displays, the object could scrambled together and un usable.

Welcome to what is essentially reactive Web Development. When you use Flex Containers, you must apply the settings to determine how your components flex or grow as their available space changes.

If you don't want to do this, you must use a Coordinate Container.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [October 23, 2023, 5:11pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/10 "2023-10-23T17:11:25Z")

</div>

A key tool when using flex containers is the `justify` prop (equivalent to `justify-content` from regular CSS). It's the way to "anchor" components at different ends of the container. If you then want a little space so things aren't right at the edge of the page, that's where you can add `padding` to the container's style.

> **[A Complete Guide to Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content)**
>
> Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4ff59e12789ef6f732ec578a26f0083bb2780b91.png)  
image borrowed from the above guide

Also, it sounds like you might have too many items in one column or row container, causing things to wrap around in ugly ways when the page resizes. If you want to prevent that you have to manually put things in row containers and turn off wrap.

---

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 23, 2023, 6:46pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/11 "2023-10-23T18:46:54Z")

</div>

I used Coordinate Container before, they had these issues with different display formfactors and resolution. It looked perfect the computer I develop it, I resize web browser with no issue.

---

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 23, 2023, 6:47pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/12 "2023-10-23T18:47:37Z")

</div>

Thanks

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 24, 2023, 2:52am UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/13 "2023-10-24T02:52:52Z")

</div>

For percent coord view, You should be setting the aspect ratio on the main view so that circles remain circles (for example). Embedded coord views and coord containers should be set to percent with _no_ aspect ratio set

---

<div class="post-metadata">

**Author:** ![Simen\_Minerd](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@Simen\_Minerd](https://forum.inductiveautomation.com/u/Simen_Minerd)\
**Post date:** [October 24, 2023, 12:52pm UTC](https://forum.inductiveautomation.com/t/perspective-container-grouped-objects-layout-issue/80843/14 "2023-10-24T12:52:17Z")

</div>

Thanks, I will test it when I got a chance, all displays in my office are the same.  
I do not want to mess up with live projects for now.
