# Make docked view responsive

**URL:** <https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098>\
**Category:** Ignition\
**Created:** [February 14, 2022, 11:43am UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098 "2022-02-14T11:43:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\
**Post date:** [February 14, 2022, 11:43am UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/1 "2022-02-14T11:43:45Z")

</div>

is it possible to have two docked views, and display one or the other depending on the resolution?

I am trying to get something like what is shown in the picture:

 ![jvict](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7cfbfdc64ceeae3bb21bd959e7ed8bcdc4051874.png)

---

<div class="post-metadata">

**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\
**Post date:** [February 15, 2022, 5:46pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/2 "2022-02-15T17:46:49Z")

</div>

any ideas?

---

<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:** [February 15, 2022, 7:28pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/3 "2022-02-15T19:28:24Z")

</div>

I have an _idea_, but it requires a shared View (like a docked view for instance) which is ALWAYS present across every page, or the logic would need to be repeated in some view for any page which doesn’t have the “shared” View present. it also requires that you’ve properly supplied an id for the docked views in question through the Page Configuration.

Components/Views of pages actually now have access to the page dimensions via `page.props.dimensions`:

 ![Screen Shot 2022-02-15 at 11.20.18 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/037fc93475c10102c22c8fb01dbd73e17734b263.png)

So you in the shared View you should set up a breakpoint width custom property, something like `custom.breakpointWidth`. now bind a second custom property against the viewport width (we’ll call this `custom.viewportWidth`).

Apply a change script to `custom.viewportWidth` and manage the docks you want open there:

```auto
if currentValue and currentValue.value < self.custom.breakpointWidth:
    system.perspective.closeDock("LeftDockedView")
    system.perspective.openDock("BottomDockedView")
else:
    system.perspective.closeDock("BottomDockedView")
    system.perspective.openDock("LeftDockedView")

```

---

<div class="post-metadata">

**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\
**Post date:** [February 17, 2022, 12:36pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/4 "2022-02-17T12:36:34Z")

</div>

@cmallonee Thanks for the idea, I’ll try it. the only drawback is that i have to have a third common dockd view. can i insert the same script in an event startup session using the device type property to detect if it is a browser or a mobile device?

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [February 17, 2022, 1:14pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/5 "2022-02-17T13:14:12Z")

</div>

Hi @lachguerabdallah, we’ve implemented something very similar to what @cmallonee has suggested. You can use any type of view that is always present, but a third ‘invisible’ docked view would work (for example 0px in height or opacity=0). It would be best to placed in the change script as @cmallonee suggested if you need it to constantly evaluate, or on the startup script of the view if you want to do it on first load of the session.

The issue with using the Session Startup Event script is that it runs in the Gateway scope (from what I remember), which means it doesn’t necessarily have reference to open the appropriate docked Views.

Another option we’ve used in the past is to always startup on an invisible view which has a startup script that sets up all the desired docked Views and then redirects to the desired main View depending on some logic (for example device type being mobile). Again, this only works on first load of the session, and is not re-evaluated.

---

<div class="post-metadata">

**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\
**Post date:** [February 17, 2022, 1:18pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/6 "2022-02-17T13:18:18Z")

</div>

@matthew.ayre I hadn’t thought of an invisible docked view.

thank you

---

<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:** [February 17, 2022, 4:55pm UTC](https://forum.inductiveautomation.com/t/make-docked-view-responsive/56098/7 "2022-02-17T16:55:07Z")

</div>

> [@lachguerabdallah](#):
>
> the only drawback is that i have to have a third common dockd view.

In theory you could place the same logic in only the docked views you're using and it should work, as long as you open the "new" docked view before you collapse the "old" one.