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
- Log in to Fuji instance.
- Navigate to Content Management > Pages.
- Select New to create a new content page with suffix of test_page and associate to the base system Employee Self-Service (ESS) site.
- Start adding iFrames (~5) to the page.
- Launch the CMS page (for example, https:<instance>.service-now.com/ess/test_site).
- Note that the scroll bar is huge and there is a lot of white space.
Workaround
- Go to the affected iFrame block and update the sizing from Size to fit content to Fixed size
- Edit the render_content_block_iframe UI Macro from height=100% to height=auto.
Following is an example workaround used in Geneva.
- Back up the base system version of the UI Macro named render_content_block_iframe.
- 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