Perspective - How to reduce dock height when small breakpoint activated?

Ignition
,
1

I have 2 docked header Views, one for PC (wide) one for mobile (narrow). The PC has more screen real estate so the header is taller. The mobile header is about half the height of the PC one. I have a breakpoint container to switch the two out, but at the moment the dock height remains at the PC height and looks stupid in mobile while also reducing precious content space.

How can I have two separate heights for these Views?

2

I haven’t found a ‘graceful’ way so far (but I haven’t spent to much time on it to be honest).

The way I have chosen is to have two separate docks with their respective heights defined. I then use a startup script on my first loaded view to perform an openDock() based on the device type session prop. For slower clients I use a bit of animation to hide the transition a little bit. However, this doesn’t work for all scenarios :disappointed:

I think there is a feature request somewhere to gain more control over docked windows.

1 Like
3

I didn’t think about this / forgot about this :slight_smile:
I’ll give that a go, cheers!

I don’t really know what the best solution would be to handle this. Maybe if there were scripting events for when the current viewport dimensions changed? That would also require the viewport dimensions to be provided (I think there were already being/been added?). What would also be nice would be to be able to dynamically size a dock via script.

1 Like
4

With using new page dimensions check the status bar dock width if it is below certain point call system.perspective.opendock to open your mobile dock view and do this vice versa in mobile dock.
You don’t need even use break point container any more.
You just need to setup two dock for your top header.
By default make desktop dock visible.

1 Like
5

do you know what version these were added to?

6

8.1.6

7

Cool! (and you mean 8.1.7 - we don’t speak of 8.1.6 :wink: It’s the naughty child who drew all over your walls with texta, or permanent marker for those less ventured)

8

8.1.7 they omit 8.1.6

9

Yes, I was going to add that :stuck_out_tongue_winking_eye:, technically 8.1.6 but major regression bug = 8.1.7

10

Am I missing something? I upgraded to 8.1.7 but don’t see anything different :frowning:
image
Unless the defaultSize updates?

Ooooo, I found it! Pays to actually read the change log :slight_smile: Verry nice, I am excite!
image

11

Found an issue with using two navigation docks and showing/hiding based on dimensions… opening a dock is added to the history stack… so using the back navigation action will close the dock :slight_smile:

1 Like
12

Is there any foolproof way of doing this yet?

I've tried the two docks + startup script method, but this doesn't work when a new page is navigated to; the headers either disappear altogether or the height gets reset.

I've tried the breakpoint method with a single dock and using a startup script on each header (big and small) to set the dock height, however again when changing page, it just resets back to the dock's default height :confused:

The most reliable method I've found is by creating a custom object prop on one of the headers (usually the PC version) with keys bound to:

  • page.props.dimensions.viewport.width
  • page.props.primaryView
  • page.props.dimensions.primaryView.height (this is needed in case the same page url is opened again...)

Then add an onchange script to the object that looks at the page width and sets the dock height. However for mobile, the dock flashes up the big version for a split second and then hides it and shows the small one. Still not sure why...

I just want a foolproof way to set the dock height based on the width of the viewport...