Pin to browser when custom page dimensions are active

Hello,

I want to pin a dynamic panel to the left side of my page. I tried to that with the option pin to browser. The problem I’m running to is that I have the page dimensions set to web (1024). So my document has a width of 1024px and is centered inside the page. When I now pin the dynamic panel to browser left, it gets pinned to the browsers left side but not to my actual zero (x) point of my “document” width. You can see the problem in the following images:
Inside Axure and the result to achieve:

What happens inside the browser:

Can anybody support me with this topic? My goal is to pin the green box to the left side of my page which has a width of 1024px through the page/web dimensions

Thanks guys!

Hi! This should work:

  • Remove the pinning entirely from your existing panel: for this example we’ll call that panel ‘myPanel’

  • Nest myPanel in a new dynamic panel called ‘outerPanel’. You can do this via right-click of myPanel.

  • Move outerPanel to x=0 at the desired y coordinate, and pin outerPanel left. Important: make sure outerPanel’s fit-to-content setting is ON (right-click outerPanel to verify this)

  • On the page’s OnWindowResize interaction, add the following code:

    OnWindowResize
      Move myPanel to [[Math.max(Window.width/2 - 1024/2, 0)]] , 0
    

Be sure to use Move to and not Move by

Here’s an example created in Axure 8. (I haven’t upgraded to 9.) You should be able to simply copy the formula from the Move to command’s X value.

pintopageleft.rp (53.3 KB)

1 Like

Thanks helped me a lot to fix it!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.