Inline embed: Dropdown menu flips upward and becomes clipped on mobile/small screens when embedded inside iframe

[nickst97]

Description

When embedding a Typeform using inline/snippet mode inside an <iframe>, dropdown/select questions render incorrectly on mobile devices or small screen sizes.

On small screens, the dropdown menu flips upward and renders outside the iframe boundary, causing the options to be visually clipped and
inaccessible.

This behavior occurs consistently on mobile or when the browser viewport width is reduced (responsive mode).

The same form behaves correctly when opened directly onform.typeform.com (standalone/full-page mode).

The issue appears specific to inline embed usage inside an iframe on mobile/small viewports.

---

Steps to Reproduce

1. Create a Typeform containing a Dropdown question.
2. Embed it using @typeform/embed with:

createWidget("FORM_ID", {
  container: element,
  medium: "snippet",
  autoResize: true,
  inlineOnMobile: true
});

(or use standard data-tf-widget inline embed)

3. Place this embed inside a parent HTML <iframe>.
4. Test on:
   • A real mobile device, or
   • Chrome DevTools responsive mode (e.g., iPhone width).
5. Scroll normally.
6. Tap the dropdown field.

---

Expected Behavior

• The dropdown should render in a direction that keeps all options visible within the available viewport.
• The dropdown options should remain fully visible and selectable.
• Behavior should match standalone/mobile Typeform behavior.

---

Actual Behavior

• The dropdown flips upward.
• The dropdown menu renders beyond the iframe's top boundary.
• The options are visually clipped and inaccessible.
• This occurs consistently on mobile/small screens in the embedded context.

---

Important Observation

Opening the same form directly at:

https://form.typeform.com/to/FORM_ID

on the same mobile device results in correct dropdown behavior.

The issue only occurs when using inline embed inside an iframe on mobile/small screens.

---

Environment

• @typeform/embed version: 5.10.0
• Devices tested: Chrome, iPhone, Android
• Embed Mode: medium: "snippet" (inline)
• Context: Embedded inside parent <iframe>

---

MicrosoftTeams-video.mp4

[joycevherck]

Hi @nickst97 - thanks for reaching out.

I've tried to reproduce the issue you've raised but the only scenario where I can reproduce is when I make the height of my embedded form bigger than the height of my viewport.

My recommendation would be to reduce the height of the embed on mobile devices or allow the full screen on mobile feature.

Let me know if you think I've missed something or if you have any other questions.

Joyce

[nickst97]

Thanks for looking into it @joycevherck !

Here’s a minimal reproduction of my setup: https://codepen.io/nickst97/full/OPXYEBQ

Could you clarify how we can enable full-screen on mobile in this case? Is it something configurable on the inline embed, or does it require switching to a different embed mode?

[joycevherck]

@nickst97 - if you remove the data-tf-inline-on-mobile attribute, the form will go into full screen mode on mobile. What it does is, it adds a Welcome Screen to your form and when a user clicks 'Start' the form goes full screen on the user's device. Would that be a possible solution for you?