Modal position in an iframe

Hey all,
I'm building an app with Retool, and have a problem with my modals.
My app is in an iframe on my website.

When I open a modal, the view automatically scrolls up to the top of the screen and display the modal on the top of the screen. (It works perfectly well in preview mode or in public mode, just happens when the app is in an iframe).

Do you know if there is a way to fix this or to force a position for the modal?
Thanks for your help.

Hi @Pierrick81 Thanks for reaching out!

Interestingly, I am not seeing the same behavior in my own embedded apps ( :thinking: No scrolling takes place)

Are you able to share an export of the app so that I can test? (resource data will not be exported) If so, feel free to post here or send a direct message. In the meantime, I am wondering if the following hack would help:

Add a text component just below or just above the modal & set it to be hidden with "Maintain space when hidden" set to true:

Then, add an event handler on "open" for the modal, that scrolls to the text component:

Thanks Tess for your quick answer.
I tested your solution, but it didn't work.
Indeed, the screen scrolls down to the textinput, but the modal is still opened on the top of the screen, so we can't see the modal.
I can't upload attachment, because "I'm a new user".
I'll seef if I can do it through a personal message.

Hey here,
I found the solution, it was because the "height" of my iframe was too important. I used 2100px.

I changed it to 1000px, and the problem is solved.


1 Like