Troubleshooting iFrame sizing within the CMS

[shuynh]

Within the Configuration Management System (CMS), iFrame content blocks are used to embed a URL on a page within a frame to display external pages or to render ServiceNow content. Using an iFrame makes it easy to display and customize content rendered within CMS.

For example, here's an out-of-box iFrame and url that displays a list of 'Active Incidents' a user has opened or is specified in the 'Caller' field:

You can see this iFrame content block in action by launching the incident_status CMS page from the Employee Self-Service (ess) site:

When configuring an iFrame (first screenshot above), there are two sizing options:

• Expand to fit content (internal content only).
• Fixed size.

If you have an iFrame with sizing set to "Expand to fit content," you may find that content rendered within the iFrame can get cut off or truncated at the bottom. In some cases, reloading the page causes the content to display. This article is aimed at providing troubleshooting steps to help narrow down the root cause and a resolution to your iFrames not sizing as expected.

Here are 7 tips to troubleshoot sizing of your iFrames in the CMS:

1. Compare 'ui_page_footer' UI Macro XML against the out-of-box version. If not the same, retest with the base system version. If this UI Macro has been customized then it would be skipped during an upgrade and any necessary code updates would not be applied.   Reference: ServiceNow KB: Forms have iFrame sizing issues and slow load time (KB0522477)
   
   
2. Compare 'render_content_block_iframe' UI Macro XML against the base system version. If it is not the same, retest using the base system version.   If this UI Macro has been customized then it would be skipped during an upgrade and any necessary code updates would not be applied. Reference: ServiceNow KB: Horizontal scroll bar is not present on CMS Design > All Sites interface (KB0523381)
   
   
3. Check the 'Default theme' that is associated to the CMS site where the issue occurs includes a base Style Sheet with the following:
   

   BODY {
   height: auto;

   Take a look at the 'Gray CSS - Base' Style Sheet associated to the Employee Self-Service (ess) site to see an example out-of-box.   Reference: ServiceNow KB: CMS pages size incorrectly in IE9 when BODY height is not set to auto (KB0534768)
   
4. Ensure the iFrame content block uses a relative URL and does not contain a slash before the parameters. For example, if the URL contains this:
   
5. If the iFrame url calls a catalog UI Page (ie com.glideapp.servicecatalog_category_view, com.glideapp.servicecatalog_checkout_view, etc) and issue is seen after upgrading, you may be hitting a known issue: Upgrading to Fuji causes catalog UI pages to lose styling (CSS) and catalog CMS pages to appear cut ...
   
   
6. Double check the 'Frame buster' (checkbox on content page that contains the iFrame) is set to true.
   
   
7. Check for Client Side errors. Within Chrome, enable the Developer Tools option and retest the steps to reproduce for the issue. Then, check the Console tab for any errors.

   Here is an example of an error caught when rendering an Order Guide within a CMS iframe and the content was cut off, truncated at the bottom:
   A search of all onLoad catalog client scripts identified a custom client script referencing "title" in the script field.   Deactivating this one script resolved the iframe truncation issue.   Any client side errors can potentially break the UI, prevent additional scripts from running thus impacting the expected rendering of content within an iframe.

If you are still not able to resolve the issue, consider changing the iFrame from "Expand to fit content" to "Fixed size" and specifying the height and width you want the Iframe to display within on your CMS Page: