# Perspective container shrink when display not visible **URL:** \ **Category:** Ignition\ **Created:** [April 10, 2022, 12:53am UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262 "2022-04-10T00:53:20Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 10, 2022, 12:53am UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/1 "2022-04-10T00:53:20Z")
What is the best way to accomplish the following, I have two items, in photo #1 the yellow area is the container, the blue area is always present, the orange area is present only as needed. When the orange is present I want the container to increase size to fit both blue and orange areas. When the orange area is not present, I want the container to shrink, as show in photo #2. I have tried several combinations of the flex container and settings, but nothing seems to work. I’m using the display property as shown in photo #3 for the orange area Is this possible? Photo #1 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d9ee60e2751aaf889c4d190ef9de5ca6eefe155.png) Photo #2 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/6160a59334dfc53ee52f583414a57b51e6a4942a.png) Photo #3 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/c/0c3d07f001f70bf0e1f1e73e5cac76b12937d8db.png) ---
**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 10, 2022, 1:11am UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/2 "2022-04-10T01:11:32Z")
There’s probably a _better_ way to do this, but the quickest way that comes to mind is binding the height or basis of whatever the encompassing container is to values which are based on the display state of the component you want to add/remove. This is dependent on the container in use (yellow) being within a Flex Container itself. ```auto if({./Label_0.position.display}, "140px", "90px") ``` This binding is set on the `basis` prop of a Flex Container and looks at a child component “Label”, and if that component is not displayed then the component uses a different ``value for `basis`. ![Screen Shot 2022-04-09 at 6.10.57 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/61ef84849de8ab9b11d9f2cdf583bc9f034e64d9.png) ![Screen Shot 2022-04-09 at 6.11.07 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/825599c974e99255f9fed58c84f26baab8c8e35a.png) ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 10, 2022, 1:18am UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/3 "2022-04-10T01:18:27Z")
Thanks @cmallonee, I tried that and it didn’t work, but perhaps I fumbled something. I will try again. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 10, 2022, 1:38am UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/4 "2022-04-10T01:38:55Z")
The only way I could get it to work was bind the root container height property. Binding the basis property on encompassing flex container did change it’s size, but the root container stayed the same size which defeats the purpose. While I got something to work, if anyone has a better method please let me know. ---
**Author:** ![jeremy.lecoutre](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jeremy.lecoutre](https://forum.inductiveautomation.com/u/jeremy.lecoutre)\ **Post date:** [April 10, 2022, 1:48pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/5 "2022-04-10T13:48:56Z")
Wrap your two containers in column container and set its basis to “auto”. Set view defaultSize height to your BlueArea height. Set Overflow in root and content container to visible. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/05f6055f5a1e00c0afb40ee266ba182af48f3639.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/3427c9c2e507869e2fb4544aa60bf034ed016ad9.png) * * * ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65a6067d019f4aac308d56b28fff0c7542216c20.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/37ae3e36b720f627e54afbec92e34e8a5f0d00b7.png) * * * ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7cc6d1e38dc8e9f2370d0cd90ef9f6a1dd6c28f4.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8f389aa16feb293352ba497827788b26ca0e90f4.png) * * * ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8ce0d88a8d3e8fb72081acd75fe793dc2189afb7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7e68c1ca18a83fd8226f2111fe02d2c9bf6af2c0.png) * * * ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/9/39f249d386416c9ac6b82c6aee6e4cf226058b03.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b1f4af67b6a9c04bf62be3480a1042567dde3363.png) ---
**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 10, 2022, 3:12pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/6 "2022-04-10T15:12:19Z")
Ah, I probably should also have mentioned that the Flex Container which contained the inner pieces was itself contained within a Flex Container (in “column” mode). ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 11, 2022, 2:03pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/7 "2022-04-11T14:03:23Z")
Do you mind attaching your example so I can import? I did exactly as you had laid out and it doesn’t work for me. ---
**Author:** ![jeremy.lecoutre](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jeremy.lecoutre](https://forum.inductiveautomation.com/u/jeremy.lecoutre)\ **Post date:** [April 11, 2022, 2:17pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/8 "2022-04-11T14:17:40Z")
I can’t add zip file in this forum (i haven’t rights yet), but you can copy this JSON and right click on a new view with shift key pressed, and click paste JSON. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56a6c94ad2db280c075228942bf955d97149c737.png) ```auto { "custom": {}, "params": { "extend": true }, "propConfig": { "params.extend": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "height": "auto", "width": 500 } }, "root": { "children": [ { "children": [ { "meta": { "name": "BlueArea" }, "position": { "basis": "50px", "shrink": 0 }, "props": { "style": { "backgroundColor": "#656DD9", "borderColor": "#000000", "borderStyle": "solid", "borderWidth": 1 } }, "type": "ia.container.flex" }, { "meta": { "name": "OrangeArea" }, "position": { "basis": "50px", "shrink": 0 }, "propConfig": { "position.display": { "binding": { "config": { "path": "view.params.extend" }, "type": "property" } } }, "props": { "style": { "backgroundColor": "#D9AF65", "borderColor": "#000000", "borderStyle": "solid", "borderWidth": 1 } }, "type": "ia.container.flex" } ], "meta": { "name": "Content" }, "position": { "shrink": 0 }, "props": { "direction": "column", "style": { "borderColor": "#EC8219", "borderStyle": "solid", "borderWidth": 4, "overflow": "visible" } }, "type": "ia.container.flex" } ], "meta": { "name": "root" }, "props": { "direction": "column", "style": { "overflow": "visible" } }, "type": "ia.container.flex" } } ``` ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 11, 2022, 2:44pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/9 "2022-04-11T14:44:14Z")
Thanks. That doesn’t work for me either. If I take that view and drop it in another view, the size doesn’t increase, it just shows scroll bars. I’m on 8.1.16. ---
**Author:** ![jeremy.lecoutre](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jeremy.lecoutre](https://forum.inductiveautomation.com/u/jeremy.lecoutre)\ **Post date:** [April 11, 2022, 2:57pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/10 "2022-04-11T14:57:11Z")
Just set overflow to visible on the view that you have dropped. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 11, 2022, 3:04pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/11 "2022-04-11T15:04:48Z")
Thanks, ultimately this will be going in a flex repeater and it works as-is in that without needing to set overflow. I should have tested in that first. Appreciate the help. To add, I was leaving off setting the view height to `auto`. In my testing, if that isn’t set to `auto` then it will not work. The screenshots didn’t show set to `auto`, but the JSON did. ---
**Author:** ![jeremy.lecoutre](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jeremy.lecoutre](https://forum.inductiveautomation.com/u/jeremy.lecoutre)\ **Post date:** [April 11, 2022, 6:54pm UTC](https://forum.inductiveautomation.com/t/perspective-container-shrink-when-display-not-visible/58262/12 "2022-04-11T18:54:06Z")
Pleasure to help. Regards