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


                                                                                  Zoho Show Resources


                                                                                    Zoho Writer Writer

                                                                                    Get Started. Write Away!

                                                                                    Writer is a powerful online word processor, designed for collaborative work.

                                                                                      Zoho CRM コンテンツ






                                                                                        Nederlandse Hulpbronnen


                                                                                            ご検討中の方





                                                                                                  • Recent Topics

                                                                                                  • Subform Client Script

                                                                                                    Good day,  I have a subform where users can subscribe to various magazines. I would like to prevent the user from selecting the same magazine twice when adding a new row. Is there a way to prevent the user from doing this? (Can it be done via a client

                                                                                                  • Checklist/ save to onedrive/ a group of items invoicing in Zoho FSM

                                                                                                    hi, is there a way to add a specific checklist to any WO without passing eachtime by the model customization? can we save file such picture directly in our sharepoint ak onedrive? is there any way to add a group of item pre defined to make invoicing easier

                                                                                                  • Introducing 'Queries' In Zoho CRM

                                                                                                    Hello everyone! We are here with an exciting feature - Queries in Zoho CRM! A little context before we dive right into the feature specifics :) In today’s fast-paced business environment, immediate access to relevant data is essential for informed decision-making.

                                                                                                  • Adding tag to specific record as an acion in a workflow

                                                                                                    Hi! I've created the following workflow in the module 'Leads'. When a record meets the criteria, there should be a tag added to the specific record in the module 'Contacts'. In the module 'Leads', there is a look-up field named 'Kandidaat' which is connected

                                                                                                  • How to see changes with ZOHO.CRM.API.updateRecord(config) without reload page

                                                                                                    hello got a widget in account, trigger with a button i copy data to account when click on a button, in my popup All is working well. But i need to reload the page to see the update. How can i see the changes without reloading page, only when close the

                                                                                                  • Serious question: Are there actually "solo-preneurs"/small business owners who made Zoho-one work well for them?

                                                                                                    L.S. After already many years of continued struggle with Zoho-One, I am seriously wondering if there are actually solo-preneurs (one person small business owners - without a large, dedicated IT dept.) who got it (Zoho-One) to work well for their businesses.

                                                                                                  • Calendar Bookings in Recruit

                                                                                                    Hi there, We have recently started using Zoho recruit and although it has some great functionality there are a few gaps that are causing real headaches. One of those being how interviews are scheduled. The majority of our hiring managers are field based

                                                                                                  • Getting Error : Developer Tool Detected

                                                                                                    Hi Team, Getting the error during open the portal, error attached on the same ticket. Please check and help us to resolve the same.

                                                                                                  • Send Zoho Creator Template by Email or sendemail

                                                                                                    Hello All Question:- How we can send the Zoho creator email template using the send email by the workflow or using the Function? by the Workflow sendmail [ from: zoho.adminuserid to: "zohodeveloper@yopmail.com" subject: "Test Template" message: "Test

                                                                                                  • Upgraded to Zoho One but Zoho Meeting still says Free Plan

                                                                                                    I signed-up for the Zoho One plan. When exploring the applications included, I came across a problem with Zoho Meeting. It says it's the free plan. I emailed support but they sent me a link that doesn't work and, when I found the article on my own, it

                                                                                                  • 新年のご挨拶、直近のイベントスケジュール

                                                                                                    🎍🐍謹賀新年🎍🐍 ユーザーの皆さま、明けましておめでとうございます！ コミュニティチームの中野です。 本年もよろしくお願い致します。 昨年のZoho Japanコミュニティでは、東京・大阪・名古屋・福岡 4都市でのユーザー交流会開催や、自社最大イベント「Zoholics Japan 2024」でZoho Championの皆さまとのパネルディスカッション、10月の東京ユーザー交流会では本社CRMプロダクトマネージャーを招きロードマップ解説セッションの実施、さらにZohoアンバサダープログラムのローンチ（近日公開予定）など、新たな取り組みに挑戦しました。

                                                                                                  • Directly Edit, Filter, and Sort Subforms on the Details Page

                                                                                                    Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

                                                                                                  • Request to Customize Module Bar Placement in New Zoho CRM UI

                                                                                                    Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

                                                                                                  • Create workflow rules based on notes

                                                                                                    Last modified on 17/04/2023: Creating Workflow rules based on notes is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of April 13, 2023, it is rolled out for al Zoho CRM accounts.

                                                                                                  • Trying to catch error with ZOHO.CRM.HTTP.get (Response Code)

                                                                                                    Hello, I'm trying to get response header from ZOHO.CRM.HTTP.get, in order to catch error like 404 or something else but it seems that ZOHO.CRM.HTTP.get() method only returns the body of the response, and I see no way to access the headers returned. Is

                                                                                                  • Error 403: Forbidden When Updating Email Signature via API

                                                                                                    Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

                                                                                                  • Client script: Can not choose a date field for an onChange field event

                                                                                                    Hi Zoho Team Why can't I choose one of my date fields to trigger an onChange event? Is this a client script limitation, or something wrong with my instance? If it is a limitation, is this mentioned in the documentation anywhere? Thanks. Marcus

                                                                                                  • How to upload mass inventory quantity adjustment with batch number?

                                                                                                    I wanted to clean-up our inventory list; however, I have trouble performing the task as I don't know how to mass upload inventory adjustment with batch numbers. I don't want to do it manually as there are if not thousands at hundreds of inventory tr

                                                                                                  • [Important announcement] Zoho Writer will mandate DKIM configuration for automation users

                                                                                                    Hi all, Effective Dec. 31, 2024, configuring DKIM for From addresses will be mandatory to send emails via Zoho Writer. DKIM configuration allows recipient email servers to identify your emails as valid and not spam. Emails sent from domains without DKIM

                                                                                                  • Upgrade User

                                                                                                    Hi Sir/Madame, I have 7 users in my organisation but I need upgrade more space only 2 users. Is it possibe? Thanks

                                                                                                  • Dashboard Auto-refresh

                                                                                                    Why is there no Auto-refresh on the Dashboard? People have been asking for the last 6 years for this function from what I can see in my reasearch, it seems like a very simple intergration for Zoho to achieve. on Sept. 2, 2014, this was added: Support

                                                                                                  • Console error with widget in View mode, not present in Edit Mode with ZOHO.CRM.API.updateRecord(config)

                                                                                                    hello i have that function to update an account records (from a widgets created with sigma) function handleCopyButtonCRMClick() { console.log('handleCopyButtonCRMClick'); /* * Fetch Information of Record passed in PageLoad * and insert the response into

                                                                                                  • add meeting link

                                                                                                    i want to add A meeting link in the mail when the user book the appointment then with the conformation mail i want to add meeting link there

                                                                                                  • Unable to add Guest Members

                                                                                                    We are having issues adding Guest Members to our Cliq account. We have sent out a number of request but it seems that only some people are able to access the platform. Others have received a message stating that they need to be granted access from an

                                                                                                  • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

                                                                                                    Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

                                                                                                  • FSM - How to ADD PHOTOS to Estimates & Invoices

                                                                                                    How can you add photos to estimates and invoices that are being emailed to the client so the can see what you are estimating and your completed work?

                                                                                                  • Zoho One - White Label

                                                                                                    Releasing a white-label feature for Zoho One, or any software or service, can offer several advantages and benefits for both the company providing the software (Zoho in this case) and its users. Here are some key reasons for releasing a white-label feature

                                                                                                  • Missing parameters in request, any way i can figure out what parameters i need to add?

                                                                                                    const url = "https://people.zoho.com/people/api/forms/json/P_Task/insertRecord"; const inputData = { "Status": "Open", "Description": "Task to set up and configure Zoho Mail on desktop application.", "CreatedTime": "01-Jan-2025 10:30 AM", "Due_Date":

                                                                                                  • Remove the [## XXXX ###] from subject replies

                                                                                                    For our organisation we would like to have the [## XXXX ###] removed from subject replies. Cheers, Jurgen 365VitaalWerken

                                                                                                  • Unlocking New Horizons: A Year in Review

                                                                                                    As we bid farewell to 2024, let's celebrate and revisit the key highlights of the year. From adding a new edition to cross-platform enhancements, here’s a roundup of all the feature updates designed to simplify accounting, optimize financial management,

                                                                                                  • Address Grabber function for Zoho

                                                                                                    I converted from ACT to Zoho. With ACT, I used an add-on called AddressGrabber to scrape the contact information from leads that I buy and contact information contained on emails and websites and directly add it as a new lead or contact. Does anyone know

                                                                                                  • Change eMail Template for Event-Invitations

                                                                                                    Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, Juerg

                                                                                                  • Can you modify "Last Activity Time" in deluge? If so what's the field name?

                                                                                                    I need to perform some bulk modifications on records in the Leads module, but I need to avoid changing the "last activity time" or "date modified" because I am using those fields to filter and sort leads for follow-up action. I cannot find an answer anywhere

                                                                                                  • Running Total % in Pivot with filters

                                                                                                    Hi there, I have seen a few posts on this topic, but i cant seem to find one that will work when applyig filters to the data. I have Rows and Data in a pivot view I want to show the running total of revenue as a % of the total for the data set. If i add

                                                                                                  • Included in Zoho One?

                                                                                                    Will LandingPage eventually be included in Zoho One?

                                                                                                  • Calendar - "pop up" locations

                                                                                                    One of the attractive features of google calendar and outlook calendar is that locations for events will start to automatically populate the location drop down menu as you type. Adding this feature to zoho calendar would be the final feature i need.

                                                                                                  • Reports - custom layout - duplicate report

                                                                                                    Do you also have this problem and what is the possible solution? I duplicate a report that has a "custom layout". Unfortunately the custom layout is not duplicated. To be improved for a future release by Zoho. I export the custom layout and import it...

                                                                                                  • Select CRM Custom Module in Zoho Creator

                                                                                                    I have a custom module added in Zoho CRM that I would like to link in Zoho creator.  When I add the Zoho CRM field it does not show the new module.  Is this possible?  Do i need to change something in CRM to make it accesible in Creator?

                                                                                                  • GROUPING OF CUSTOMER

                                                                                                    SIR PLEASE ADD GROUPING OF CUSTOMER IN ZOHO BOOKS

                                                                                                  • Zoho LandingPage is integrated with Zoho One!

                                                                                                    Greetings to the Zoho One users out there! We're delighted to let you know that Zoho LandingPage is available in Zoho One too! With Zoho LandingPage, you can host custom-made landing pages, and persuade the visitors to dive deeper by making further clicks,

                                                                                                  • Next Page