Notifications

972 views

Description

Adding multiple iFrames to a CMS page makes the scroll bar expand and causes a lot of white space, and makes the IFrames disappear.

Steps to Reproduce

  1. Log in to Fuji instance.
  2. Navigate to Content Management > Pages.
  3. Select New to create a new content page with suffix of test_page and associate to the base system Employee Self-Service (ESS) site.
  4. Start adding iFrames (~5) to the page.
  5. Launch the CMS page (for example, https:<instance>.service-now.com/ess/test_site).
  6. Note that the scroll bar is huge and there is a lot of white space.

Workaround

  1. Go to the affected iFrame block and update the sizing from Size to fit content to Fixed size
  2. Edit the render_content_block_iframe UI Macro from height=100% to height=auto.

Following is an example workaround used in Geneva.

  1. Back up the base system version of the UI Macro named render_content_block_iframe.
  2. Replace the XML code with the following:

    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate var="jvar_frame_url">
    var current_url = new GlideURL(current.url);
    current_url.set("sysparm_nameofstack", GlideGuid.generate(null));
    current_url.set("sysparm_clear_stack", "yes");
    var url = current_url.toString();
    url;
    </g:evaluate>
    <j:if test="${current.sizing != 'expand'}">
    <iframe class="content_embedded" frameborder="0" style="height:${current.height}px;width:${current.width}px" src="${jvar_frame_url}" name="${current.frame_name}"/>
    </j:if>
    <j:if test="${current.sizing == 'expand'}">
    <g:set_if test="${current.frame_name.nil()}" var="jvar_frame_name" true="${current.sys_id}" false="${current.frame_name}" />
    <iframe width="100%" height="1200" name="${jvar_frame_name}" id="${jvar_frame_name}" frameborder="0" border="0" allowtransparency="true" src="${jvar_frame_url}" scrolling="yes"/>
    <!-- <script>
    (function() {
    CustomEvent.observe('content_frame.resized', contentFrameResized);
    CustomEvent.observe('content_frame.loaded', contentFrameResized);
    var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;

    function contentFrameResized(name, height) {
    if (!name)
    return;

    var f = $(name);
    if (!f)
    return;

    // avoid using an AND here
    if (!isFirefox || height == 10)
    _resize(f, height);
    else {
    // delay resize for firefox
    setTimeout(function() {
    _resize(f, height);
    }, 0);
    }
    }

    function _resize(f, height) {
    f.height = height;
    }

    $('${jvar_frame_name}').on('load', function() {
    window.scrollTo(0, 0);
    });
    })();
    </script> -->
    </j:if>
    </j:jelly> 

Related Problem: PRB633783

Seen In

Eureka Patch 10
Eureka Patch 5 Hot Fix 1
Fuji Patch 6
Geneva Patch 4
Geneva Patch 6
Helsinki Patch 2

Associated Community Threads

There is no data to report.

Article Information

Last Updated:2018-07-12 12:00:05
Published:2015-10-29