Answered

Ending Button is hidden on iPhone14 - embedded widget

  • 1 February 2023
  • 6 replies
  • 36 views

The ending button of the page is hidden below the display area and is not Visible. 


​​​​​

I am using 

"@typeform/embed-react": "^2.10.0",

And here is the code : 

<main>  <Widget      id="oElL78nR"      style={widgetContainerStyle}      medium="demo-test"      hidden={{ foo: 'foo value', bar: 'bar value' }}      transitiveSearchParams={['foo', 'bar']}      iframeProps={{ title: 'Foo Bar' }}      onSubmit={(data) => onSubmitCall(data)}      onEndingButtonClick={(data) => onEndingButtonClickCall(data)}      onClose={(data) => console.log('On onClose called, ' + JSON.stringify(data))}      fullScreen={true}  /></main>

I am not sure what is going wrong! I have tried to play around with the CSS, it was of no use. Could you please help?

icon

Best answer by mathio 1 February 2023, 18:44

View original

6 replies

Userlevel 7
Badge +5

@mathio may be able to help with this one!

Could you provide the URL where you have the form embedded, @Che ?

Userlevel 7
Badge +5

Hello @Che .

Apparently this behavior is intended by the mobile browser developers. To address it we have recently introduced fullScreen prop for the embed. 

You are supplying custom style widgetContainerStyle to the component which might be in conflict with default Widget style. Try removing it and see if it helps.

I just tested your react code (without the custom style) and it worked just fine - see this CodeSandbox: https://sp54o1.csb.app/

Hi @mathio Thank you for taking a look at this, I tried without the `widgetContainerStyle` unfortunately that didn’t help.

Please Have a look at our app - https://customeqrcodegenerator.d1km8c3m55f9gc.amplifyapp.com/events/1

Is it some global CSS that messing this up?

 

Hey @Liz and @mathio Could you please help?

Userlevel 7
Badge +5

I guess there is some other conflicting CSS in that case. Since I can not see or edit your React code, I am unable to help. The CodeSandbox I posted above works, can you use it to fix your issue? Or maybe can you replicate your issue in CodeSandbox and I can have a look?

Thank you for taking a look. I have fixed it on our end. 

Reply