Pin to browser on iOS

Hi,
I’ve built a prototype for an iPhone 8 and I have a dynamic panel that I have pinned to the browser (bottom, left). However, when I generate the prototype, the panel does not pin. I’m assuming this is a bug on iOS? If so, when is this likely to be fixed? It works fine when I preview on desktop and Android devices. Thanks in advance!

Hi,

Disable “fit to content” of your Dynamic panel :wink:

I’ve tried that with no luck :cry:
Does it work for you on iOS?

Hi ameri!

This is currently a known issue we have on file where dynamic panels do not stay pinned on iOS devices on the 9 beta, and I’ve added this post to that report. In the meantime, the workarounds would be to create the project in Axure RP 8, or to view the project on an Android device.

Hi @Jane_Axure, do you have any updates on this? :slight_smile:

Hi ameri,

It looks like this bug is still in the works to get fixed, but I’ve edited the report to let our teams know more users are running into this issue!

Hi. Any updates on this? I have this problem as well. Cannot use 9 because of this :frowning:

Hi, yup same here. Tried on several different browsers too. Love the new features in 9 but this is limiting who I can demo this with as prototyping apps which have lots of pinning.

1 Like

is this an old bug to do with the sidebar?

If so how can I force the a scaled mobile view. Its seems to pin when the url is the page name…however the scaling is wrong. eg [axshare-link]/home.html

Hi, @mallow I’ve got a fix for you.

on Axure 8 you could set the viewport width to the size of your page. This then scales all devices to match that viewport width. So all you need to do is add this meta tag in the head of the html manually. Since there isn’t any mobile options in the Axure9.

If you haven’t done this before here is a guide:

  1. login to axshare
  2. find your your prototype
  3. click the dropdown on the cog
  4. select plugins
  5. Then add new plugin
  6. Give it a name…say viewport tag
  7. add this line of code to the content (note the width is the default page width. in my case its 360px

<meta name="viewport" content="width=360">

9.Add plugin to all pages, and new pages by default
10.click save
11.preview with the direct url of the start page not the generic project url. So for example https://cpgvka.axshare.com/home.html

here is an working example

Hi, @lukewoolfson. Sorry for late response. I didn’t check this forum for a while.
I have tried your solution, but it seems it doesn’t work.
Anyway, is it a solution for my problem? I don’t have a problem with prototype’s width. I have a problem with panels not being pinned to browser. I’d like to have sticky header or footer, but it doesn’t work on an iPhone.
I have tried your solution with Safari on iOS and on Axure Share app. Doesn’t work on both :confused:

When you link directly to the html page of the prototype the width wont be set correctly. However the pins will work.

So to get the pins to work and the width to be set to be the right size you need to scale the viewport to the size of the project width. in Axure 8 this was the way to do it in the settings of the project. However since Axure 9 doesn’t have these viewport settings you need to manually add the line of code.

If its not working for you. Have you tried the link to my project did that display ok? Check the code is active on the page on your project. You could inspect the page in chrome and search for the code. Also check the width you have put in the code matches the width of your project. Maybe clear your cookies or open an incognito window. Just incase the browser cached something?

If you get stuck I can also share the test project file with you.

@lukewoolfson Thanks for trying to help. It would be great if you could share your project file. I have compared code in your project and mine using inspector. In your project I can see this line you mentioned:

<meta name="viewport" content="width=360">

This is the only line with viewport in your project. Meanwhile, code in my project has this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />

Looks like a line from Axure 8, but this is Axure 9 project. And you don’t have this line. And I don’t have this line I’ve set with plugins as you told me. Strange

OK, it works. Kinda. When I open with prototypes link, it directs me here:
https://fkp0tv.axshare.com/#id=sjypwq&p=home

And then it doesn’t work correctly and the code has just this line regarding viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />

But when I open the link using your suggestions:
https://fkp0tv.axshare.com/home.html

Pin to browser works on my iPhone and Safari shows this code:

<meta name="viewport" content="width=320">

It still doesn’t work with Axure Share app, which I guess uses default link:
https://fkp0tv.axshare.com/#id=sjypwq&p=home
BTW, what is this #id=sjypwq part? I cannot recall seeing this when using Axure 8.

yup it only works when you use the URL to the html page rather than the project code. Is there a reason you need to use the default share view on your phone? There might be a way to get this going but I suspect the container might take over…but someone else with more html experience might know.

Ideally Axure could fix this bug too!

1 Like

Thanks for answer. Yes, I need to use Axure Share app sometimes for testing. If I design a website, sending link is fine. But testing an app prototype is just better with Axure Share app. The experience is like using the real app. There is no address bar from Safari. And, if you download a prototype to make a local copy, everything works instantly. There is no lag because of server requests. Too bad that using Axure 9 with Axure Share app is not an option right now :confused:

Hi, any updates on this topic? When pin to browser will work properly in Axure 9? Thank you.

Hi there,

Wondering what code you used to get it to work for Axure 9? You mentioned the initial suggestion didn’t work?

Thanks!
Molly

Hi there,
Thanks for your suggestions for this issue. I’m using Axure 9 and tried adding this code to my plugin: <meta name="viewport" content="width=375">

I’m not sure if that’s doing anything because basically the pinning works if I’m just scrolling but if I type into a text field the mobile auto movements are pushing it off the page. We need the pinning to work for a mobile form user test via Axure Share.

Here’s my project link and file: https://chdovi.axshare.com
Pinned header for mobile form.rp (47.5 KB)

Hi. I just tried your file with the latest Axure 9 version. Tried both with mobile Safari and with Axure Cloud app on my iPhone. In both cases I can reproduce the bug you mentioned. I don’t know how to fix it as the dynamic panel is properly pinned to top. I think this is a bug in Axure and I would suggest to contact Axure support.
I love Axure, but I stopped using it for my mobile designs because of those problems with panels not pinning to top and bottom properly :confused: I really hope those things will be fixed one day.