Responsive iFrame for HTML Page Snippet in Creator Pages

02/21/2024 11:36 AM - Comment(s) - By Jesus Sosa

Responsive iFrame for HTML Page Snippet in Creator

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>
  13. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen></iframe>
  14. </div>




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>
  17. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen></iframe>
  18. <iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen></iframe>
  19. </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



Get Started Now

Jesus Sosa

Categories -
Zoho Creator
Share -
Tags -