# Dynamic Sizing of Component in Coordinate Container View

**URL:** <https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 17, 2023, 4:11pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604 "2023-10-17T16:11:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umar\_Khalil](https://avatars.discourse-cdn.com/v4/letter/u/6de8d8/32.png) [@Umar\_Khalil](https://forum.inductiveautomation.com/u/Umar_Khalil)\
**Post date:** [October 17, 2023, 4:11pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/1 "2023-10-17T16:11:40Z")

</div>

Hi, I have a view with a root coordinate container. The view is used as a popup and has many components that are fixed on the page, one of which is a text box area. I would like to resize the view and have only the description box increase/decrease in size. Using percent mode of the coordinate container makes all the components increase in size and that is not what I am looking for. I've also tried wrapping the text area in a flex container however that also did not give what I am looking for.

Wondering if anyone has come across the same scenario and has any suggestions?

Cheers

---

<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 17, 2023, 4:20pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/2 "2023-10-17T16:20:12Z")

</div>

Can you post a screen shot of the popup? Would it make more sense to use a flex view instead of a coord view? 99.99 times out of 100 in my experience, a popup should be a flex view

Flex containers within coord containers are generally a wild beast that struggle to be tamed

---

<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 17, 2023, 4:22pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/3 "2023-10-17T16:22:48Z")

</div>

> [@Umar\_Khalil](#):
>
> I've also tried wrapping the text area in a flex container however that also did not give what I am looking for.

Because the flex container is embedded in a coordinate container, so the container itself does not resize dynamically.

You can use a percentage for the width and height properties of your text box though. Even if the container itself isn't in percent mode. You can also do calculations there.  
So, let's say there's a label on the left of the text box. That label is 150px wide, and you want the text box to take the remaining space. You can use `width: calc(100% - 100px)`  
Adapt for your layout and you should be fine.

---

<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 17, 2023, 4:27pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/4 "2023-10-17T16:27:31Z")

</div>

You can also set components inside a Coordinate Container to use a percentage value - even if the Coordinate Container itself is not in percent mode.

If you want the Text Area to always be ten percent of the width of whatever container it is in, you could set the `width` to "10%".

---

<div class="post-metadata">

**Author:** ![Umar\_Khalil](https://avatars.discourse-cdn.com/v4/letter/u/6de8d8/32.png) [@Umar\_Khalil](https://forum.inductiveautomation.com/u/Umar_Khalil)\
**Post date:** [October 18, 2023, 4:50pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/5 "2023-10-18T16:50:27Z")

</div>

Thank you cmallonee! This worked and I was able to implement it.

---

<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 19, 2023, 9:49am UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/6 "2023-10-19T09:49:40Z")

</div>

I feel ignored :X

Let me show why I believe you want `calc(100% - npx)`:

Here are a fixed sized red label, and a `50%` blue label:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/e/fe0170804d13b69f8ec16cf4698b97213ba57d3b.png)

So far, so good.  
But, If you make the view wider...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/955fe4e15812d7049bfa41c36c2b2971a904cf14.png)

or smaller...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5bb8a0918ca24bb2cc1047bdb624ff8c8fbd08dd.png)

They'll still take 50% of the width of the view, no matter what percentage of the view the red label takes.

Now, with the width of the blue label set to `calc(100% - 200px)`:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a0be64b087aaebdabdded05129f3d29c43a87c37.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/5831c17d4f669e163b98060b44319d3d10c69e07.png)

It fits the view much more nicely.

If you don't want it to be too small, it's easy, you can add a `min-width` style:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/491652b3ae9ea0771d242f20ad779ce6a1547b28.png)

And now it can't get smaller than 200px !

---

<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 19, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/dynamic-sizing-of-component-in-coordinate-container-view/80604/7 "2023-10-19T21:24:29Z")

</div>

Hello @pascal.fragnoud, I'm listening to you 🙂
