Giters

CleverTap / clevertap-android-sdk

CleverTap Android SDK

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

InApp Custom HTML doesn't render iframes

rwrz opened this issue · comments

commented

Describe the bug
I'm experimenting with the InApp Campaigns, choosing the "Custom Html" options, and then using this snippet:

<div style="position: relative; height:100vh; max-height:100vh; overflow:auto;"> 
<iframe 
src="https://app.formbricks.com/s/clpbk6rat30ymdl2iror8f5ip" 
frameborder="0" style="position: absolute; left:0; bottom:0; width:100%; height:50%; border:0;">
</iframe>
</div>

In the preview, it works quite well, but not inside the App. There, it shows nothing, just the overlay.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new InApp campaign with the HTML snippet above
  2. Wait for the InApp to show or trigger it
  3. It will show an empty InApp

Expected behavior
It was expected for it to render the full HTML, including iframes.

Screenshots/Logs
image
image

Environment (please complete the following information):

  • Device: POCO X5 Pro
  • OS: Android 13
  • CleverTap SDK Version v5.2.1
  • Android Studio Version 2023.1.1
  • Flutter SDK v1.9.1

Additional context
I've tested the same HTML, using Flutter WebView plugin and it works as expected.

commented

I'm closing it here. The problem wasn't the iFrame, but how the "height" works inside the Webview.
To find it out, I had to debug the webview, then I saw that my iframe height was 0 (vh wasn't working). So I've changed the HTML TO:

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<div style="position: relative; height: 100%;overflow: hidden;">
<iframe src="https://app.formbricks.com/s/clpbk6rat30ymdl2iror8f5ip" frameborder="0" style="position: absolute; left:0; bottom:0;width:100%;max-height: 400px; height: 100%; border:0; overflow: hidden;">
</iframe></div>
</body>
</html>

Thanks and I hope this sample would help others to fix any issues as well.

commented

@rwrz Thanks for pointing this out!