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)







      Bootcamp
      Community
      Pricing
      Webinars
      What's New
      Integrations
      Contact Support
      Contact Sales



          Zoho Survey Resources
            Features
            Survey Templates
            Integrations
            Community
            iOS Mobile Surveys
            Pricing
            Android Mobile Surveys
            Insurvey Blogs
            Insight Blogs
            Tips & Tricks





                          Setup Zoho Bigin in 30 Minitues
                          Latest Feature Updates

                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day




                                Zoho Marketing Automation
                                  Zoho SalesIQ Resources


                                        Manage your brands on social media
                                        Access Zoho Social

                                          Zoho Pagesense Resources


                                              Zoho TeamInbox Resources

                                                Zoho DataPrep Resources



                                                  Zoho CRM Plus Resources

                                                    Zoho Books Resources


                                                      Zoho Subscriptions Resources

                                                        Zoho Projects Resources


                                                          Zoho Sprints Resources


                                                            Qntrl Resources


                                                              Zoho Creator Resources


                                                                Zoho WorkDrive Resources



                                                                  Zoho Campaigns Resources

                                                                    Zoho CRM Resources

                                                                    • CRM Community Learning Series

                                                                      CRM Community Learning Series


                                                                    • Tips

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now