# Change view Docked View depending on viewport height

**URL:** <https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694>\
**Category:** Ignition\
**Created:** [September 2, 2023, 5:34pm UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694 "2023-09-02T17:34:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [September 2, 2023, 5:34pm UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/1 "2023-09-02T17:34:47Z")

</div>

Greeting everyone,

I am trying to change the view of an embedded view located on a docked view using a custom parameter on the component, but I can't make it to work.

As you can see on the screenshot, i have a principal view called Alarm Menu that has the view on it, and two additional views that serves as the view to show if the viewport size is bigger than the stablished point and if smaller.

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

Using a custom parameter on the View component, a binding has been made with the height parameter of the viewport, using a script of transformation:

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

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

However, when viewing the project on the browser and adjusting its height, the view doesn't seem to change and stays the same everytime. What could be the problem for not working properly?

---

<div class="post-metadata">

**Author:** ![user77](https://avatars.discourse-cdn.com/v4/letter/u/a183cd/32.png) [@user77](https://forum.inductiveautomation.com/u/user77)\
**Post date:** [September 4, 2023, 6:24am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/2 "2023-09-04T06:24:35Z")

</div>

Are you looking to adjust the size of your dock view or just the embedded view inside your dock view?

If you are looking to change the entire dock size then you can use alterDock. As of version 8.1.19, using Perspective, you can change the dock parameters via alterDock scripting function.

[https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock](https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock)

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [September 4, 2023, 7:52am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/3 "2023-09-04T07:52:41Z")

</div>

Hi there!

The idea is that based on the provided code, the "path" parameter on the embedded view would change depending on the height of the screen, changing between views based on the stablished point.

I tried to do the same coding on main views and it seemed to work. However, when trying to do that on docked views it wouldn't work, displaying always the same view

---

<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:** [September 4, 2023, 7:58am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/4 "2023-09-04T07:58:25Z")

</div>

Breakpoint containers:

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

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [September 4, 2023, 8:44am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/5 "2023-09-04T08:44:00Z")

</div>

But isn't the breakpoint containers only used for width values?

---

<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:** [September 4, 2023, 8:51am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/6 "2023-09-04T08:51:36Z")

</div>

You're right. I somehow thought you could configure the breakpoint direction.

edit: 200px is very small though, are you sure you're actually reaching that when testing ?

I tried this expression and it works just fine:

```auto
if ({page.props.dimensions.viewport.height} > 300,
	"path/to/viewA",
	"path/to/viewB"
)

```

Note that your binding seems weird: you should be binding the path, not changing the path as a side effect from a binding on another property.

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [September 4, 2023, 10:48am UTC](https://forum.inductiveautomation.com/t/change-view-docked-view-depending-on-viewport-height/78694/7 "2023-09-04T10:48:06Z")

</div>

Hey that seemed to work perfectly. Thanks a lot!