# Change dock placement depending on screen height

**URL:** <https://forum.inductiveautomation.com/t/change-dock-placement-depending-on-screen-height/80018>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 4, 2023, 2:07pm UTC](https://forum.inductiveautomation.com/t/change-dock-placement-depending-on-screen-height/80018 "2023-10-04T14:07:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [October 4, 2023, 2:07pm UTC](https://forum.inductiveautomation.com/t/change-dock-placement-depending-on-screen-height/80018/1 "2023-10-04T14:07:12Z")

</div>

Hi,

On smartphone, my taskbar is good in portrait but too large in landscape.  
Is it possible to deplace bottom dock to the right depending on my screen height ?

 ![1000006984](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41c0c93f77dd136deb08b36f28e60d30c3d4a3de.jpeg)  
 ![1000006985](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c9b61d1f86b77c734c5daec1730d4486bd9a26aa.jpeg)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [October 4, 2023, 8:35pm UTC](https://forum.inductiveautomation.com/t/change-dock-placement-depending-on-screen-height/80018/2 "2023-10-04T20:35:56Z")

</div>

If you are on 8.1.19 or higher, you shoul be able to do this with  
[system.perspective.alterDock - Ignition User Manual 8.1 - Ignition Documentation (inductiveautomation.com)](https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock)

---

<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 4, 2023, 8:57pm UTC](https://forum.inductiveautomation.com/t/change-dock-placement-depending-on-screen-height/80018/3 "2023-10-04T20:57:59Z")

</div>

The `alterDock` function is indeed the place to do this, but be warned that the modifications there are on a per-page basis; navigating to a different page will put your Docked View back to the bottom (assuming it is a shared Docked View).

You might want to look into the Auto Breakpoint setting available for Docked Views. Unfortunately, I believe the setting works in the opposite direction of what you're looking for... The current implementation makes a check against the width of the browser viewport and makes the Docked View "collapse" if smaller than the applied setting value.

I think the following setup _might_ work:

1. Apply your Docked View (DV) to both sides of the Page and supply each with a unique ID ("taskbar\_left"/"taskbar\_bottom").
2. For the DV on the left, use Auto Breakpoint to specify the width of the Page which dictates when the DV should be _removed_.
3. Within the View in use for the DV, place a new custom property `bottom_should_be_expanded`.
4. Bind `bottom_should_be_expanded` to an Expression: `{page.props.dimensions.viewport.width} < {page.props.dimensions.viewport.height}`
5. Add a change script to this `bottom_should_be_expanded`:

```auto
# untested code
dock_to_expand = "taskbar_bottom" if currentValue and currentValue.value else "taskbar_left"
dock_to_collapse = "taskbar_left" if if currentValue and currentValue.value else "taskbar_bottom"
system.perspective.closeDock(id=dock_to_collapse)
system.perspective.openDock(id=dock_to_expand)

```

That script will run twice (because it lives in both Docked Views attached to the page), but they'll both be doing the exact same thing.