# Flex Container & Embedded Views

**URL:** <https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 7, 2021, 1:39pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341 "2021-04-07T13:39:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwilliams](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jwilliams](https://forum.inductiveautomation.com/u/jwilliams)\
**Post date:** [April 7, 2021, 1:39pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/1 "2021-04-07T13:39:17Z")

</div>

I’m currently using embedded views to bring the same exact view to different pages within my perspective project. However, I am having a hard time changing the size of them properly and the components within them lining up correctly on different pages. Is it possible to use a Flex Container with an Embedded View in fixed mode and scale the embedded view within it following the rules of the flex container?

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [April 7, 2021, 2:04pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/2 "2021-04-07T14:04:59Z")

</div>

Hi @jwilliams, would you be able to provide screenshots of exactly what you need?

It should be possible using the different types of views/containers, but it’s difficult to advise which combination would be best without context 🙂

---

<div class="post-metadata">

**Author:** ![jwilliams](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jwilliams](https://forum.inductiveautomation.com/u/jwilliams)\
**Post date:** [April 7, 2021, 2:16pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/3 "2021-04-07T14:16:00Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c7a3ce09d740613378189a4a9a7812ac0312efe.png)  
Above I have a Flex Container with an Embedded View within it. The Embedded View is set to fixed as I need all the components within it to adjust at the same rate.  
However as you can see below when I adjust the Flex Container, it doesnt resize the embedded view within it. Note that changing the overflow from auto to any of the other options does not result in the view scaling down as you would expect in a Flex Container. I also have to use the embedded view as the components within it have tags that allow the different lines to change colors for different states.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8dffd37386c0e0fce4f9dbeeb45f3064823adac9.png)

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [April 7, 2021, 2:47pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/4 "2021-04-07T14:47:32Z")

</div>

> [@jwilliams](#):
>
> The Embedded View is set to fixed as I need all the components within it to adjust at the same rate.

Is this:

1. The view contained within the embedded view component is a coordinate container set to fixed mode?

OR

1. The embedded view component has been set so that the grow/shrink values are 0?

A different point of view, if you are using this as a pipe animation you may find using a background SVG and overlaying components on it better for performance etc. I haven't had to do this personally, but this thread details it: [Project screenshots - share yours - #122 by nminchin](http://forum.inductiveautomation.com/t/project-screenshots-share-yours/513/122)

---

<div class="post-metadata">

**Author:** ![jwilliams](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jwilliams](https://forum.inductiveautomation.com/u/jwilliams)\
**Post date:** [April 7, 2021, 2:48pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/5 "2021-04-07T14:48:40Z")

</div>

The view contained within the embedded view is a coordinate container set to fixed mode.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [April 7, 2021, 2:53pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/6 "2021-04-07T14:53:50Z")

</div>

If this is set to fixed mode the view will never resize. You will need to change it to percent mode and ensure that the aspect ratio settings etc. are correct for your requirements.

---

<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:** [April 7, 2021, 3:15pm UTC](https://forum.inductiveautomation.com/t/flex-container-embedded-views/45341/7 "2021-04-07T15:15:36Z")

</div>

For pipework e.g. P&IDs, I use blank-text labels with borders set for my pipes, either single edges or 2 perpendicular edges. At least for now anyway while we don’t have piping tools.  
While you can use percent mode in a coordinate container to have your graphic resize, I’ve found that it’s far more painful than it’s worth:

- all size and positions will then be in percent (0-1.0) which makes it incredibly difficult to work with
- getting text to resize properly is a real pita (pain in the arse)!

But if you need it, make sure to set your aspect ratio to the expression:

```auto
{this.view.props.defaultSize.width} + ':' +
{this.view.props.defaultSize.height}

```

as Matt alluded to in order to maintain your aspect ratio and not have components resize disproportionately. The above is from memory, so might be slightly different… Might need to remove ‘.view’
