2076 views

Expand to fit iFrame content is cut off, truncated or not expanding in CMS

 

Problem
Within the Configuration Management System (CMS), an iFrame embeds a URL on a page within a frame. It can be used to specifically embed external pages or to render ServiceNow content within the content page. It is common to define an iFrame with forms created in the system and link to the page in which the iFrame resides. For more information, see Configure iFrames in the product documentation.

There are two options to choose from when sizing an iFrame:
  • Expand to fit content (internal content only)
  • Fixed size
Customers who have selected "Expand to fit content" may find that content rendered within the iFrame can get cut off or truncated at the bottom when the page is rendered. 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 method to achieve relief.

Troubleshooting recommendations:


  1. Compare 'ui_page_footer' UI Macro XML against the out-of-box version. If not the same, retest with the base system version.
    Reference: PRB590472 - Expand to fit content sizing property is not working for iFrames (KB0522477)

  2. Compare 'render_content_block_iframe' UI Macro XML against the base system version. If not the same, retest using the base system version.
    Reference: PRB571547 - 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;

    See 'Gray CSS - Base' Style Sheet associated to the Employee Self-Service (ess) site to see an example out-of-box. Reference: PRB594058 - CMS pages size incorrectly 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:

    https://<instance>.service-now.com/com.glideapp.servicecatalog_category_view.do?sysparm_parent=c87eeccc0fa031006420e64be1050e37 

    -or- this:

    com.glideapp.servicecatalog_category_view.do/?sysparm_parent=c87eeccc0fa031006420e64be1050e37

    ... the URL format should be this:

    com.glideapp.servicecatalog_category_view.do?sysparm_parent=c87eeccc0fa031006420e64be1050e37

    Reference: Configure iFrames

  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 off at the bottom of the page.

  6. Ensure 'Frame buster' (checkbox on content page that contains the iFrame) is set to true.
    Reference: Create a content page 

  7. Check for Client Side errors
    Enable Chrome Developer Tools, retest steps to reproduce the issue and check the Console tab for any errors.  The following 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.

 

Immediate workaround


If you are still not able to resolve the issue, consider:

  1. changing the iFrame from "Expand to fit content" to "Fixed size"
  2. specifying the height and width.

Reference: https://hi.service-now.com/kb_view.do?sysparm_article=KB0529664

Article Information

Last Updated:2016-09-20 10:13:36
Published:2015-10-16