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)







    Access your files securely from anywhere

        Zoho Developer Community

            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





                              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 Campaigns Resources


                                                                          Zoho CRM Resources

                                                                          • CRM Community Learning Series

                                                                            CRM Community Learning Series


                                                                          • Kaizen

                                                                            Kaizen

                                                                          • 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