FINALLY! 100% Responsive iFrame for HTML Page Snippet

FINALLY! 100% Responsive iFrame for HTML Page Snippet

For the past two years or so I have been battling with Page Snippets' responsiveness (HTML, Embed, and ZML). Furthermore, if you use the native embedded reports, especially more than one report on a page, you have to set a static height because they're not very responsive, and if they are, it's never correct.

I always divert to the iFrames for ease, however, it's been virtually impossible to get the iFrames' responsiveness correct. In the last 24 hours I decided to give it my all, and bam! I got it. I am sharing this because I don't believe anyone on here has shared CSS/HTML that actually works for iFrame responsiveness, including Zoho support. Hope this helps anyone with the same/similar issues. 

Also, please note, to keep the entire <div> responsive, it would be best to add content/<div>'s inside the "parent-container" if you need to add more Forms, Reports, etc. to the Page. 

The code below is a single <div> containing two separate iFrames/Reports, as seen in the photo examples. 
  1. <style>
  2. .parent-container {
  3. display: flex;
  4. width: 100%;
  5. height: calc(100vh - 120px);
  6.  }
  7. .child-container {
  8. flex: 1;
  9. margin: 10px;
  10. }
  11. .child-container:first-child {
  12. flex: 0 0 60%;
  13. margin-right: 5px;
  14. }
  15. </style>
  16. <div class="parent-container">
  17. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
  18. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
  19. </div>

The code below is a single <div> containing a single iFrame/Report. 
  1. <style>
  2. .parent-container {
  3. display: flex;
  4. width: 100%;
  5. height: calc(100vh - 120px);
  6.  }
  7. .child-container {
  8. flex: 1;
  9. margin: 10px;
  10. }
  11. </style>
  12. <div class="parent-container">
  13. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
  14. </div>

Page Setup Steps:
  1. Add a Page to your app
  2. Add an HTML Snippet to the page
  3. Add the code above
  4. Customize to your needs

Desktop Example (22 inch screen)





MacBook Air Example (13 inch screen)