Skip to main content
Answered

Ending Button is hidden on iPhone14 - embedded widget

C
  • Che
  • Explorer
  • 3 replies

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?

Best answer by mathio-tf

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/

View original

6 replies

Liz
Ex–Typefomer
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 15035 replies
  • February 1, 2023

@mathio may be able to help with this one!

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

Life is a series of awkward moments separated by snacks.
mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • Answer
  • February 1, 2023

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/

Liz
john.desborough
2 people like this
  • Liz
    Liz
  • john.desborough
    john.desborough
C
  • Che
  • Author
  • Explorer
  • 3 replies
  • February 1, 2023

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?

 

C
  • Che
  • Author
  • Explorer
  • 3 replies
  • February 2, 2023

Hey @Liz and @mathio Could you please help?

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

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?

Liz
C
2 people like this
  • Liz
    Liz
  • C
    Che
C
  • Che
  • Author
  • Explorer
  • 3 replies
  • February 3, 2023

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

mathio-tf
1 person likes this
  • mathio-tf
    mathio-tf

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs Accessibility statement