# Dynamically change embedded view size

**URL:** <https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 12, 2024, 3:16pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558 "2024-02-12T15:16:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![steven.hess](https://avatars.discourse-cdn.com/v4/letter/s/2acd7d/32.png) [@steven.hess](https://forum.inductiveautomation.com/u/steven.hess)\
**Post date:** [February 12, 2024, 3:16pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/1 "2024-02-12T15:16:25Z")

</div>

Hi All,

I'm trying to take an embedded view and use it as a "dock" screen. Meaning that I want to use a slider to increase/decrease its size on the screen. And based on that the breakpoint containers on the screen would change depending on how much its taking up. I was wondering if anybody has done this before? If so how did you do it?

Thanks!

---

<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:** [February 12, 2024, 3:22pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/2 "2024-02-12T15:22:34Z")

</div>

Can you describe in more details what the end goal is ?

Could the `resizable` option of the dock be enough ?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6f2bffcd8c0a2f5fec8848d5acb03979e1d4ed3c.png)

---

<div class="post-metadata">

**Author:** ![steven.hess](https://avatars.discourse-cdn.com/v4/letter/s/2acd7d/32.png) [@steven.hess](https://forum.inductiveautomation.com/u/steven.hess)\
**Post date:** [February 12, 2024, 9:43pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/3 "2024-02-12T21:43:24Z")

</div>

So yeah I want that resizable feature basically i want to be able to move the embedded view like a docked view but not "docked" if that makes sense. I attached a very very high level example of what I'm trying to do

 ![Untitled](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f39f779c756e6e88fdfe932774838a011d8f8aea.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 12, 2024, 11:32pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/4 "2024-02-12T23:32:01Z")

</div>

Have you considered the Split Container component?

![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f533bac3a9a7921d60a6b36471659a759615faf.gif)

[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Split+Container](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Split+Container)

---

<div class="post-metadata">

**Author:** ![steven.hess](https://avatars.discourse-cdn.com/v4/letter/s/2acd7d/32.png) [@steven.hess](https://forum.inductiveautomation.com/u/steven.hess)\
**Post date:** [February 13, 2024, 12:01am UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/5 "2024-02-13T00:01:20Z")

</div>

@Transistor That would be exactly what I need! Sadly I'm running 8.1.17 and I'm not sure the client I'm doing this for will let me upgrade to 8.1.18 due to other projects on there.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 13, 2024, 12:18am UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/6 "2024-02-13T00:18:49Z")

</div>

What root view type are we working with? (Flex / Coordintate, etc.)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 13, 2024, 12:50am UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/7 "2024-02-13T00:50:35Z")

</div>

Try pasting this view into Project Browser → Perspective → Views.

> **DIY Split Container JSON**
>
> ```auto
> {
> "custom": {
> "split": 50
> },
> "params": {},
> "propConfig": {
> "custom.split": {
> "persistent": true
> }
> },
> "props": {
> "defaultSize": {
> "height": 272,
> "width": 690
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "Slider"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.value": {
> "binding": {
> "config": {
> "bidirectional": true,
> "path": "view.custom.split"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "style": {
> "paddingLeft": 10,
> "paddingRight": 10
> }
> },
> "type": "ia.input.slider"
> },
> {
> "children": [
> {
> "meta": {
> "name": "EmbeddedView_L"
> },
> "position": {
> "basis": "20px",
> "shrink": 0
> },
> "propConfig": {
> "position.grow": {
> "binding": {
> "config": {
> "expression": "{view.custom.split} / (100 - {view.custom.split})"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "style": {
> "borderColor": "#0B479C",
> "borderStyle": "solid",
> "borderWidth": 1,
> "margin": 8
> }
> },
> "type": "ia.display.view"
> },
> {
> "meta": {
> "name": "EmbeddedView_R"
> },
> "position": {
> "basis": "20px",
> "grow": 1,
> "shrink": 0
> },
> "props": {
> "style": {
> "borderColor": "#0B479C",
> "borderStyle": "solid",
> "borderWidth": 1,
> "margin": 8
> }
> },
> "type": "ia.display.view"
> }
> ],
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "basis": "200px",
> "grow": 1
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column"
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

![DIY Split Container](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/93dc7caad8b6bc2e20a7ed0d40a91d68a2067ef7.gif)

Notes:

- The view is a flex column.
- The slider has a bidirectional binding to the view's `props.custom.split`. (That avoids messy and brittle bindings from the next step.)
- The slider is followed by a Flex Row into which two Embedded View components are added. They have the following settings:  
`position.shrink : 0`  
`position.basis : 20px` (Set this to whatever minimum width you want.)
- The relative weights of the `position.grow` properties determine the relative widths of the embedded views. For simplicity we set the one on the right to `position.grow : 1`.
- The embedded view on the left has its `position.grow` calculated by an expression binding:  
`{view.custom.split} / (100 - {view.custom.split})`

So, if the slider is at 75 of 100 the result is 75 / (100 - 75) = 3 giving us a 3:1 ratio between the views.  
If the slider is at 25 of 100 the result is 25 / (100 - 25) = 1/3 giving us a 1:3 ratio between the views.

I suggest binding the slider's `props.trackColor` to its `props.railColor` and specifying a neutral color for the rail. Having different colors each side of the slider knob (as in my animation) doesn't make any visual sense in this application.

Have fun.

---

<div class="post-metadata">

**Author:** ![steven.hess](https://avatars.discourse-cdn.com/v4/letter/s/2acd7d/32.png) [@steven.hess](https://forum.inductiveautomation.com/u/steven.hess)\
**Post date:** [February 13, 2024, 1:50am UTC](https://forum.inductiveautomation.com/t/dynamically-change-embedded-view-size/85558/8 "2024-02-13T01:50:58Z")

</div>

> [@Transistor](#):
>
> (100 - {view.custom.split})

You are a gentleman and a scholar. This works perfectly! Thanks