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?
1 Like
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?
1 Like
Can't get it to work either... This is as close as I've gotten.
.docked-view-bottom {
height: auto !important;
}
@media (min-width: 450px) {
.psc-truckschedule-mobilenav {
max-height: 0;
}
}
Then if I change the auto breakpoint to 100:
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.
if({page.props.dimensions.viewport.width}<=450,1000,0)
Here's what I came up with:
1 Like
