# Perspective flex container component order

**URL:** <https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023>\
**Category:** Ignition\
**Created:** [April 5, 2022, 12:45am UTC](https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023 "2022-04-05T00:45:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [April 5, 2022, 12:45am UTC](https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023/1 "2022-04-05T00:45:24Z")

</div>

I am building a simple embedded view which will have a process variable readout, and a label. I would like to pass in a parameter which specifies whether the label appears above or below the process variable.

The embedded view is a flex container, so in the designer, I can simply drag the label above or below the process variable - but is there a way to adjust this dynamically at runtime? Obviously I could create labels above and below and bind the “display” parameter to ensure only the correct one shows up - but that’s the sort of trick that I’ve gotten used to not needing in Ignition, so I thought perhaps there’s another way.

---

<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:** [April 5, 2022, 2:07am UTC](https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023/2 "2022-04-05T02:07:11Z")

</div>

You could always bind the display order against some variable:  
Bind `root.props.direction` against some property.

 ![Screen Shot 2022-04-04 at 7.06.30 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1fb9f4e7211f193bba59e1f610f02c825fb2e700.png)  
 ![Screen Shot 2022-04-04 at 7.06.42 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a46e165e65c5db4f402bef40d4ebe8d4745cf53.png)

---

<div class="post-metadata">

**Author:** ![gdube](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gdube/32/41701_2.png) [@gdube](https://forum.inductiveautomation.com/u/gdube)\
**Post date:** [April 5, 2022, 2:14am UTC](https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023/3 "2022-04-05T02:14:52Z")

</div>

You can add the `order` property within `style` on each component. Do a little routine to change them at runtime.

> **[Ordering Flex Items - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)**
>
> New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also...

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [April 7, 2022, 6:43am UTC](https://forum.inductiveautomation.com/t/perspective-flex-container-component-order/58023/4 "2022-04-07T06:43:54Z")

</div>

Thanks to you both - a simple solution for this particular application by @cmallonee and a more complex, general purpose solution for all applications by @gdube. This forum is fantastic 👍