Typeform Popup Display Issue on Phones. | Community
Skip to main content
Answered

Typeform Popup Display Issue on Phones.


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>

 

 

Best answer by mathio-tf

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

View original

8 replies

mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • August 16, 2021

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


  • Author
  • Explorer
  • 1 reply
  • August 16, 2021

Thank you, Mathio, for your reply!


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-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • April 20, 2022

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.


Hi Mathio,

Thank you for your answer


  • Explorer
  • 1 reply
  • August 24, 2022

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
Ex–Typefomer
Forum|alt.badge.img+5
  • Ex–Typefomer
  • 1777 replies
  • August 25, 2022

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


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • August 25, 2022

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