Answered

Typeform Popup Display Issue on Phones.

  • 15 August 2021
  • 8 replies
  • 278 views
M

Hello, I am having issues with my Typeform on mobile devices. Whenever someone tries to start the form they are unable as the start is hidden by the devices native UI. I was wondering if it was possible to adjust the height and/or size of a popup for mobile on devices? I attempted to resize the popup using “data-tf-size”, but it only affected the display on desktop, notebook and tablets. Phones remained unaffected. I initially used the shared link the display the form and it worked fine on phones, however since it is hosted on a different URL some of our clients have explained that they feel uncomfortable filling out the form. This is why we chose to do the pop-up format. Even when I attempt scrolling up or down the start button on the form remains hidden.

I have attached a photo and the html snippet I used:

 

<a data-tf-popup="[Hidden]" data-tf-size = "85" style="color:#ffffff;font-family: judson;font-size:calc(1.30em + 2.45vw);cursor:pointer;"><center>Start Your Project</center></a><script src="//embed.typeform.com/next/embed.js"></script>

 

 

icon

Best answer by mathio 16 August 2021, 10:18

View original

8 replies

mathio
Rank
Userlevel 7
Badge +5

Hello, we are aware of this bug and will look into it soon. We will keep you updated when its fixed.

M

Thank you, Mathio, for your reply!

T

Hello !

I have the same issue as Marcus : the start button on the form is hidden on mobile.

The problem has not been solved yet ? 

Thanks for your feeedback

mathio
Rank
Userlevel 7
Badge +5

Hello, we are aware that this issue has resurfaced again with latest versions of mobile browsers. We are working to have it fixed by the end of this week.

T

Hi Mathio,

Thank you for your answer

M

Is it fixed  4 months after the last reply?

I've even tried using CSS but it does not work.
 

body {
    min-height: 100vh;
    min-height: fill-available;
    min-height: -webkit-fill-available;
}
html {
    height: fill-available;
    height: -webkit-fill-available;
}
Gabi Amaral
Rank
Userlevel 7
Badge +5

@MAvanmed I'm tagging @mathio here so he can confirm this issue has been fixed!

Everyone you meet is fighting a battle you know nothing about. Be kind. Always. =)
mathio
Rank
Userlevel 7
Badge +5

Yes, it is fixed. You can find the popup demo in our embed demo repository: 

https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popup-html

There is no additional CSS necessary. The popup detects when the toolbar on mobile device is hidden or displayed (when viewport changes) and it resizes itself to fit current screen height.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs