Skip to main content
Answered

Typeform display problem on mobile


Forum|alt.badge.img

Hi !

As you can see on the screenshots, I have a problem with my typeform on mobile, the form is displayed correctly before you start the form, but then you can see that the size change and it overflows on the right outside the margins. I use a wordpress website with Divi.

Thanks for your help.

 

Best answer by mathio-tf

You are overriding our default CSS and that broke your embed:

.tf-v1-widget-fullscreen {
    position: relative!important;
}

If you want to display your embedded typefom inline, you can use data-tf-inline-on-mobile option in your embed code (see “Embedded typeforms on mobile” at the end of this page).

View original

14 replies

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

Hi @MathieuMic 

can you share the link to your embedded typeform? You most likely have some CSS that conflicts with typeform CSS. I can have a look.


Forum|alt.badge.img
  • Author
  • Explorer
  • 9 replies
  • March 8, 2022

Hi @mathio,

Here is the link : https://pac-subventions.fr/ 

Thanks


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • March 8, 2022

You are overriding our default CSS and that broke your embed:

.tf-v1-widget-fullscreen {
    position: relative!important;
}

If you want to display your embedded typefom inline, you can use data-tf-inline-on-mobile option in your embed code (see “Embedded typeforms on mobile” at the end of this page).


Forum|alt.badge.img
  • Author
  • Explorer
  • 9 replies
  • March 8, 2022

Thanks it worked, but now I have an other issue, as you can see on the screen the “OK” button is appears on the middle of the screen, any way to correct this please ? 

Thanks


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

I can see it like this, which is expected, I think:

 

 


Forum|alt.badge.img
  • Author
  • Explorer
  • 9 replies
  • March 8, 2022

Yes but when you scroll down the OK button is moving up on my phone, I tried Safari and Chrome


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

I can not replicate that on an iPhone in Safari, sorry.


  • Explorer
  • 3 replies
  • April 29, 2023
MathieuMic wrote:

Thanks it worked, but now I have an other issue, as you can see on the screen the “OK” button is appears on the middle of the screen, any way to correct this please ? 

Thanks

Hello mathio, 

 

Is there a way to remove this OK button in the middle of the screen on mobile? 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 1, 2023

Hello @lyagaya , you can not remove that button.

However it seems like there might be some issue with the alignment and position of that button. Can you please share URL of the page with your typeform? I will have a look.


  • Explorer
  • 3 replies
  • May 2, 2023
mathio wrote:

Hello @lyagaya , you can not remove that button.

However it seems like there might be some issue with the alignment and position of that button. Can you please share URL of the page with your typeform? I will have a look.

Hello @mathio , I have three typeforms embedded:

https://explorink.lt/mini
https://explorink.lt/standartinis
https://explorink.lt/be-rupesciu

Also, before embedding I selected the “full screen on mobile” option, but it doesn’t come up as full screen on mobile. The code is:
<div data-tf-widget="MRUN08lq" data-tf-opacity="100" data-tf-iframe-props="title=Mini planas" data-tf-transitive-search-params data-tf-disable-scroll data-tf-auto-resize data-tf-medium="snippet" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js"></script>


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 2, 2023

I (or someone else from the responsible team) will get back to you on the “OK” button.

As for the “full screen on mobile” option - I see you are not placing the embed code directly into your website, but it is wrapped inside another <iframe> tag:

<iframe class="grid-embed__iframe" srcdoc="<!DOCTYPE html>
	<head>
<style>
	html {
		overflow: hidden;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
 	}

 	iframe {
 		max-width: 100%;
 	}
</style>
</head>
	<body> <div data-tf-widget=&quot;MRUN08lq&quot; data-tf-opacity=&quot;100&quot; data-tf-iframe-props=&quot;title=Mini planas&quot; data-tf-transitive-search-params=&quot;&quot; data-tf-disable-scroll=&quot;&quot; data-tf-auto-resize=&quot;&quot; data-tf-medium=&quot;snippet&quot; style=&quot;width:100%;height:600px;&quot;></div> <script src=&quot;//embed.typeform.com/next/embed.js&quot;></script></body>
</html>" title="custom code element"></iframe>

If you do this, the typeform will be always constrained inside this iframe. When it tries to open in a popup and resize to full screen it is limited to the size of this iframe and will not cover the rest of the page. If you can place the code directly into your page, not the iframe, it should work as expected.


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • May 8, 2023

Hi, I was told by the respective team (and I also confirmed on iPhone) that the “OK” button position was just fixed.


mathio wrote:

Hi, I was told by the respective team (and I also confirmed on iPhone) that the “OK” button position was just fixed.

I’ve just dev tested my first Typeform survey and I’m still getting the “OK” button appearing on iPhones using both Chrome and Safari (those I’ve tested). My test responses do require a scroll down to be able to see/select some options. Most of my multiple choice questions only have single choice and the survey is automatically moving forward to the next question.  Is there anything specific I need to change to remove this OK button?


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • July 17, 2023

It is by design to have the “OK” button in your form. My comment was regarding the bug of incorrect position of the button at the time.


Reply