# Perspective Dock Auto Breakpoint Max

**URL:** <https://forum.inductiveautomation.com/t/perspective-dock-auto-breakpoint-max/51662>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 6, 2021, 4:30pm UTC](https://forum.inductiveautomation.com/t/perspective-dock-auto-breakpoint-max/51662 "2021-10-06T16:30:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacob.ramirez](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jacob.ramirez](https://forum.inductiveautomation.com/u/jacob.ramirez)\
**Post date:** [October 6, 2021, 4:30pm UTC](https://forum.inductiveautomation.com/t/perspective-dock-auto-breakpoint-max/51662/1 "2021-10-06T16:30:04Z")

</div>

In the settings for a dock in perspective, there is an option for “Auto Breakpoint”. Which is the minimum width needed for that dock to be displayed.

What if we wanted to go the other way?

I know I could use a breakpoint container but it’s a different dock and view.  
So to expand on what I’m trying to do is I have a left dock view (menu) and a bottom dock view (menu).

The views are very different because the left dock needs to be displayed on the desktop as the bottom dock needs to be displayed when on a phone. I want to add a bottom dock to the page configuration but it only needs to be displayed when the screen size is smaller than that breakpoint.

How do I achieve this?

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [July 10, 2023, 10:00pm UTC](https://forum.inductiveautomation.com/t/perspective-dock-auto-breakpoint-max/51662/2 "2023-07-10T22:00:25Z")

</div>

Bump. I'm looking to achieve the same thing - have a bottom navigation only appear for smaller screen resolutions. What is the preferred way to achieve this?

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [July 25, 2023, 9:37pm UTC](https://forum.inductiveautomation.com/t/perspective-dock-auto-breakpoint-max/51662/3 "2023-07-25T21:37:32Z")

</div>

Can't get it to work either... This is as close as I've gotten.

```auto
.docked-view-bottom {
height: auto !important;
}
@media (min-width: 450px) {
.psc-truckschedule-mobilenav {
max-height: 0;
}
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b1e74af0badad654292ae5be86161234f486562.png)  

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/36fb32a53ef64ec38f9dbb9a3f14cffddcf5b6f5.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/36fb32a53ef64ec38f9dbb9a3f14cffddcf5b6f5.mp4)

Then if I change the auto breakpoint to 100:

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34fc3b1999a05b640dfbf301694596915403e64d.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34fc3b1999a05b640dfbf301694596915403e64d.mp4)

The left dock behaves more or less how I want it to using the same css trickery, but for whatever reason with the bottom dock it leaves a ghost dock behind. By ghost dock, I mean I can't find it in the dom at all, but it's clearly visible on the page.

Unfortunately, the only way I can figure to do this is to have the dock embedded in each view made for a mobile device, then bind the visibility or max-height to the page viewport width. Hopefully we will get a max-size breakpoint in the future.

```auto
if({page.props.dimensions.viewport.width}<=450,1000,0)

```

Here's what I came up with:

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba45cbfd04cf3b99b67c812681e8a347fe5a3876.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba45cbfd04cf3b99b67c812681e8a347fe5a3876.mp4)