Hello everyone, I am currently embedding retool iframe(self-hosted) on our company website. To avoid scrolling, we would like to set height of div(which is wrapping iframe) to the height of the content of the iframe.
As the origins of the parent are different from the iframe, we cannot really manipulate or access the details of the iframe window. The only solution which I could see here is sending a message from the retool iframe(including its height) to the parent. I couldn't find a way to trigger this automatically on the page load.
We have tried using the script similar to what mentioned here: Scripting Retool but it appears that the iframe is sandboxed and it doesn't have information we need to pass(Ref: JavaScript in Retool). We have also tried resolving using CSS but that doesn't work either.
Does anyone has a solution to this? Any leads would be welcome.
Hey Abhinav, this is a really interesting idea! I just turned on a feature flag for you to enable parent window communication when your Retool app is embedded as an iFrame.
Using this, you should be able to send data to resize your div height based on the Retool iFrame. Specifically, you may want to send {{ viewport.height }} to the parent application.
Hey Gopal, thank you for your response. I have tried using this solution but unfortunately the height passes is inaccurate. The possible reason for this could be that the app runs inside an internal iframe.
Would you mind clarifying a bit what exactly you mean by inaccurate? It would help a lot if we could see any screenshots of your current setup so that we can take a look at where exactly your experiencing issues
Hi Retool Team, how can we get access to this feature? We'd like to do exactly what was requested here. We're embedding a Retool app and would like the div/iframe to match the height of the app contents.
This is a feature flag we can turn on for your org from our end if you don't already have access to it, typically if you reach out to us directly with your org info we'll handle it for you!
