iframe is too small

joshehren · ‎05-10-2017

Thanks in advance for your help with this. The iframe pictured below is too small and the links need to open in a new window. This is an issue we ran into while testing Istanbul.

In our current instance (Geneva) the frame is the appropriate size and links open in a new window. Here are the settings that are identical for both instances:

Thanks,

josh

Jon Barnes · ‎05-11-2017

Ok, the second error is probably not that critical, but that first error is likely the cause of your issue. The script above is using jquery to select elements, and to resize the iframe. I would try replacing all instances of "jQuery" with "$j" in that script, which should resolve it.

View solution in original post

Jon Barnes · ‎05-10-2017

I presume my_time_worked is a custom UI Page on your system. I couldn't find any page with that name on my personal instance, unless it is from a plugin I don't have installed. I also noticed that you have no pages using your iframe, so really, configuring this iframe in this way won't fix the iframe within your UI Page.

Can you post the HTML markup and client script of your UI Page called my_time_worked? within there, I think you will find the html markup for the tabs and the iframe. Also, if there is a script in there that dynamically sizes your iframe, maybe it is failing after istanbul. can you also check your browser developer console to see if there are any JS errors on that page?

joshehren · ‎05-11-2017

Hello Jonathan. Thanks for your reply.

The developer console seems to have 2 messages:

1.

js_includes_customer.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:233 Uncaught TypeError: jQuery(...).live is not a function

at HTMLDocument.<anonymous> (js_includes_customer.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:233)

at i (js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:23106)

at Object.add [as done] (js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:23106)

at n.fn.init.n.fn.ready (js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:23106)

at editPage (js_includes_customer.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:232)

at js_includes_customer.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:226

at F (js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:18)

2.

And this:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

_sendRequest @ js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:11186

navpage.jsx:90 [00:00:01.554] *** WARNING *** GlideAjax.getXMLWait - synchronous function - processor: AJAXGlideRecord

js_includes_doctype.jsx?v=03-22-2017_2342&lp=Tue_May_09_21_25_31_PDT_2017&c=9_45:11139

Here is the HTML: (...the client script is pasted below the HTML)

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<style>

.list_header {

display: block;

}

#tabs_wrapper {

width: 100%;

}

#tabs_container {

border-bottom: 1px solid #ccc;

}

#tabs {

list-style: none;

padding: 5px 0 4px 0;

margin: 0 0 0 10px;

font: 0.75em arial;

}

#tabs li {

display: inline;

}

#tabs li a {

border: 1px solid #ccc;

padding: 4px 6px;

text-decoration: none;

background-color: #eeeeee;

border-bottom: none;

outline: none;

border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

}

#tabs li a:hover {

background-color: #dddddd;

padding: 4px 6px;

}

#tabs li.active a {

border-bottom: 1px solid #fff;

background-color: #fff;

padding: 4px 6px 5px 6px;

border-bottom: none;

}

#tabs li.active a:hover {

background-color: #eeeeee;

padding: 4px 6px 5px 6px;

border-bottom: none;

}

#tabs li a.icon_accept {

background-image: url(accept.png);

background-position: 5px;

background-repeat: no-repeat;

padding-left: 24px;

}

#tabs li a.icon_accept:hover {

padding-left: 24px;

}

#tabs_content_container {

box-sizing: border-box;

border: 1px solid #ccc;

border-top: none;

padding: 10px;

width: 100%;

}

.tab_content {

display: none;

}

iframe.resize {

border: 2px solid #666;

margin-bottom: 20px;

}

.iframe_label, .toggle_iframe_class {

font-size: 1.1em;

font-weight: bold;

}

.toggle_iframe_class {

cursor: pointer;

}

.collapsed .toggle_iframe_class {

background: #ffffff url('images/list_v2_heir_hide.gifx') no-repeat 0 0;

padding-left: 16px;

}

.expanded .toggle_iframe_class {

background: #ffffff url('images/list_v2_filter_hide.gifx') no-repeat 0 0;

padding-left: 16px;

}

.collapsed iframe {

display: none;

}

.expanded iframe {

display: block;

}

.collapsed .reload {

display: none;

}

.expanded .reload {

display: inline;

}

.reload {

cursor: pointer;

padding-bottom: 5px;

}

body {

overflow-y: scroll;

}

</style>

<g2:evaluate>

gs.include("j2js");

var assigned_to = gs.getUserID();

//var assigned_to = '18174b1720009c00b9a990be6d2b435c';

var assignment_group = getMyGroupsAsString();

//var query_suffix = "active=true^assigned_to=" + assigned_to + "^ORDERBYpriority^ORDERBYDESCdue_date^sys_created_on";

var excluded_tables = 'pm_project,rm_release_scrum,rm_sprint,u_program,rm_product,u_checklist_task,u_project_portfolio';

var excluded_suffix = 'sys_class_nameNOT%20IN' + excluded_tables + '^';

var cardArr = [];

var tab0Arr = ['task'];

var tab1Arr = ['incident', 'u_incident_task'];

var tab2Arr = ['problem', 'u_problem_task'];

var tab3Arr = ['change_request', 'u_project_change_request', 'change_task'];

var tab4Arr = ['sc_task', 'sc_req_item'];

//var tab5Arr = ['pm_project_task', 'rm_story', 'u_story_task',

// 'rm_epic', 'rm_defect', 'rm_test',

// 'u_project_artifact', 'u_demand_request', 'u_project_deliverable'];

var tab5Arr = ['planned_task'];

var tab6Arr = ['task_u']; // for unassigned tasks

var tableArr = [tab0Arr, tab1Arr, tab2Arr, tab3Arr, tab4Arr, tab5Arr, tab6Arr];

var tabCtArr = {};

var taskCtArr = {};

var labelArr = {};

var taskObj = {};

var taskObjStr = '';

taskObj.task_u = []; // to hold unassigned task numbers

taskCtArr.task_u = 0; // count of unassigned tasks

// don't process last tab

for (var i = 0; i ${AMP}lt; tableArr.length - 1; i++) {

tabCtArr['tab' + i] = getCardCt(tableArr[i]).toFixed(0);

labelArr[tableArr[i]] = getTableLabel(tableArr[i]);

}

tabCtArr.tab0 = (parseInt(tabCtArr.tab0) + parseInt(taskObj.task_u.length)).toFixed(0);

tabCtArr.tab6 = taskObj.task_u.length.toFixed(0);

labelArr.task_u = labelArr.task;

var json = new JSON();

var taskObjStr = json.encode(taskObj);

//gs.log('taskObjStr: ' + taskObjStr);

function getCardCt(tables) {

var cardCt = 0;

for (var i = 0; i ${AMP}lt; tables.length; i++) {

var cardGR = new GlideRecord(tables[i]);

cardGR.addQuery('active', 'true');

cardGR.addQuery('assigned_to', assigned_to + '');

cardGR.addQuery('sys_class_name', 'NOT IN', excluded_tables);

if (tables[i] == "change_request") {

cardGR.addQuery('sys_class_name', '!=', 'u_project_change_request');

}

cardGR.query();

taskCtArr[tables[i]] = cardGR.getRowCount();

if (cardGR.hasNext()) {

cardCt = cardCt + cardGR.getRowCount();

}

// bring in unassigned tasks

if (tables[i] != 'task') {

var cardAgg = new GlideAggregate('u_all_task_time_worked');

cardAgg.addQuery('twtable_user', assigned_to + '');

cardAgg.addQuery('tsk_sys_class_name', 'NOT IN', excluded_tables);

if (tables[i] == 'planned_task') {

gs.log('query planned_task');

cardAgg.addQuery('tsk_sys_class_name', 'IN', getTableExtensionsStr(tables[i]));

}

else {

cardAgg.addQuery('tsk_sys_class_name', tables[i]);

}

if (tables[i] == "change_request") {

cardAgg.addQuery('tsk_sys_class_name', '!=', 'u_project_change_request');

}

cardAgg.addQuery('tsk_active', true);

cardAgg.addQuery('tsk_assigned_to', '!=', assigned_to + '');

var qc = GlideRecord.addNullQuery('tsk_assignment_group');

qc.addOrCondition('tsk_assignment_group', 'NOT IN', assignment_group + '');

//cardAgg.addAggregate('COUNT', 'tsk_number');

cardAgg.addAggregate('COUNT', 'tsk_sys_id');

cardAgg.query();

//gs.log("unassigned count: " + tables[i] + " : " + cardAgg.getRowCount());

taskObj[tables[i]] = [];

while (cardAgg.next()) {

//gs.log('cardAgg: ' + cardAgg.tsk_number);

//taskObj[tables[i]].push(cardAgg.tsk_number + '');

//taskObj.task_u.push(cardAgg.tsk_number + '');

taskObj[tables[i]].push(cardAgg.tsk_sys_id + '');

taskObj.task_u.push(cardAgg.tsk_sys_id + '');

}

var ct = taskObj[tables[i]].length;

taskCtArr[tables[i] + '_u'] = ct;

taskCtArr.task_u += ct;

// cardCt = cardCt + ct;

}

return cardCt;

}

function getTableExtensionsStr(table) {

// see TableUtils Script Include for more TableUtils

var jTables = Packages.com.glide.db.DBObjectManager.get().getTableExtensions(table);

var jsTables = [table];

jsTables = jsTables.concat(j2js(jTables));

gs.log('jTables (' + table + ') ' + jTables);

gs.log('jsTables (' + table + ') ' + jsTables.join(','));

return jsTables.join(',');

}

function getTableLabel(table) {

var retval = '';

if (!labelArr[table]) {

var labelGR = new GlideRecord('sys_documentation');

labelGR.addNullQuery('element');

labelGR.addQuery('name', table);

labelGR.query();

if (labelGR.next()) {

retval = labelGR.plural;

}

else {

retval = labelArr[table];

}

return retval;

}

function getTableRowCt(table) {

return taskCtArr[table];

}

function getMyGroupsAsString() {

var groupsArray = getMyGroupsAsArray();

return groupsArray.join(',');

}

function getMyGroupsAsArray() {

var myUserGroups = gs.getUser().getMyGroups();

var groupsArray = [];

var it = myUserGroups.iterator();

var i=0;

while(it.hasNext()){

var myGroup = it.next();

groupsArray[i]=myGroup;

i++;

}

return groupsArray;

}

function getTabTableCt(tabArr) {

var ct = 0;

for (var i = 0; i ${AMP}lt; tabArr.length; i++) {

if (taskCtArr[tabArr[i]] > 0) {

ct += 1;

}

return ct;

}

</g2:evaluate>

var taskObj = jQuery.parseJSON('$[taskObjStr]');

var collapseMsg = "Collapse list";

var expandMsg = "Expand list";

var reloadMsg = "Reload list";

function getURL(table, query_table) {

var prefix = "target=_blank$[AMP]table=" + table + "$[AMP]sysparm_query=";

if (table == "task" || table == "planned_task" || table == "task_u") {

prefix += '$[excluded_suffix]';

}

if (table == "change_request") {

prefix += 'sys_class_name!=u_project_change_request^';

}

if (table != 'task_u') {

prefix += 'active=true^assigned_to=$[assigned_to]^';

}

if (table == "task") {

prefix += 'NQ';

}

if (table == "task" || table == "task_u") {

//prefix += 'numberIN' + taskObj.task_u.join(',') + '^';

prefix += 'sys_idIN' + taskObj.task_u.join(',') + '^';

}

prefix += 'ORDERBYpriority^ORDERBYDESCdue_date^ORDERBYDESCsys_created_on';

var url = '/' + query_table + '_list.do?' + prefix +

'$[AMP]sysparm_view=time_card';

return url;

}

function printIframe(table, tableCt, label) {

//if (table != 'planned_task') return;

// onload="resizeFrame(this)"

//console.log(table + " " + tableCt);

var query_table = (table == 'task_u') ? 'task' : table;

var str = '';

if (tableCt > 1) {

str += '<div class="collapsed"><span class="iframe_label toggle_iframe_class" title="' + expandMsg + '">' + label + '</span>${SP}<img class="reload" src="reload.gifx" title="' + reloadMsg + '" />';

}

else {

str += '<div><span class="iframe_label">' + label + '</span>${SP}<img class="reload" src="reload.gifx" title="' + reloadMsg + '" />';

}

//str += '<iframe id="' + table + '_iframe" class="resize" src="' + getURL(table, query_table) + '" style="overflow:scroll;height:100%;width:99%" height="100%" width="99%"></iframe>';

str += '<iframe id="' + table + '_iframe" class="resize" src="' + getURL(table, query_table) + '" width="99%"></iframe>';

if (tableCt > 1) {

str += '</div>';

}

else {

str += '</div>';

}

document.write(str);

}

function setUserPreference(name, value) {

//console.log("set " + name + ":" + value);

var userPrefGR = new GlideRecord('sys_user_preference');

userPrefGR.addQuery('user', '${gs.getUserID()}');

userPrefGR.addQuery('name', name);

userPrefGR.query();

if (!userPrefGR.hasNext()) {

var newUserPrefGR = new GlideRecord('sys_user_preference');

newUserPrefGR.initialize();

newUserPrefGR.user = '${gs.getUserID()}';

newUserPrefGR.name = name;

newUserPrefGR.value = value;

newUserPrefGR.update();

}

</script>

<h1>My Time Worked ($[gs.getUserDisplayName()])</h1>

<li class="active"><a href="#tab0">All ($[tabCtArr.tab0])</a></li>

<li><a href="#tab1">Incident ($[tabCtArr.tab1])</a></li>

<li><a href="#tab2">Problem ($[tabCtArr.tab2])</a></li>

<li><a href="#tab3">Change ($[tabCtArr.tab3])</a></li>

<li><a href="#tab4">Request ($[tabCtArr.tab4])</a></li>

<li><a href="#tab5">Project ($[tabCtArr.tab5])</a></li>

<li><a href="#tab6">Other Work ($[tabCtArr.tab6])</a></li>

</ul>

</div>

<j2:forEach items="$[tab0Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab0Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab1Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab1Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab2Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab2Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab3Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab3Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab4Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab4Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab5Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab5Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

<j2:forEach items="$[tab6Arr]" var="jvar_table">

<g2:evaluate var="jvar_show" jelly="true">

var show = getTableRowCt(jelly.jvar_table) != 0;

show;

</g2:evaluate>

<g2:evaluate var="jvar_ct" jelly="true">

var ct = getTabTableCt(tab6Arr);

ct;

</g2:evaluate>

<g2:evaluate var="jvar_label" jelly="true">

var label = getTableLabel(jelly.jvar_table);

label;

</g2:evaluate>

<j2:if test="$[jvar_show]">

</j2:if>

</j2:forEach>

</div>

</j:jelly>

//////////////////////////////////////////////////////////////////////////////////////Here is the client script:////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

jQuery(document).ready(function(){

// When user clicks on tab, this code will be executed

jQuery("#tabs li").click(function() {

// First remove class "active" from currently active tab

jQuery("#tabs li").removeClass('active');

// Now add class "active" to the selected/clicked tab

jQuery(this).addClass("active");

// Hide all tab content

jQuery(".tab_content").hide();

// Here we get the href value of the selected tab

var selected_tab = jQuery(this).find("a").attr("href");

// Show the selected tab content

jQuery(selected_tab).fadeIn();

// At the end, we add return false so that the click on the link is not executed

return false;

});

jQuery(".reload").click(function() {

var iframe = jQuery(this).parent().find('iframe');

iframe.attr('src', function( i, val ) { return val; });

});

// if loaded on a home page, adjust width, height, and scroll

var portalFrame = jQuery('iframe[src^="/my_time_worked.do"]', window.parent.document);

if (portalFrame.length > 0) {

// set height and width

portalFrame.height("500");

var width = portalFrame.width();

// allow scrolling

portalFrame.css("overflow-y", "auto");

portalFrame.attr("scrolling", "auto");

}

// user preferences

var preferences = ['show.column.header',

'task',

'incident',

'u_incident_task',

'problem',

'u_problem_task',

'change_request',

'u_project_change_request',

'change_task',

'sc_task',

'sc_req_item',

'pm_project_task',

'rm_story',

'u_story_task',

'rm_epic',

'rm_defect',

'rm_test',

'u_project_artifact',

'u_demand_request',

'u_project_deliverable',

'rm_product',

'planned_task'];

for (var i = 0; i < preferences.length; i++) {

var pref = preferences[i];

var value;

if (pref == 'show.column.header') {

value = 'NULL';

}

else {

value = pref + '.REL:c6e9b28a10f830007046d4afeec0ad28';

pref = 'selected.related.list.' + pref;

}

setUserPreference(pref, value);

//console.log(pref + ":" + value);

}

//setUserPreference('show.column.header', 'true');

//setUserPreference('selected.related.list.pm_project_task', 'change_request.REL:c6e9b28a10f830007046d4afeec0ad28');

jQuery("span.toggle_iframe_class").bind('click', function () {

var elt = jQuery(this).parent();

if (elt.hasClass('expanded')) {

elt.removeClass('expanded');

elt.addClass('collapsed');

jQuery(this).attr('title', expandMsg);

}

else {

elt.removeClass('collapsed');

elt.addClass('expanded');

jQuery(this).attr('title', collapseMsg);

}

});

Thanks,

josh

Jon Barnes · ‎05-11-2017

Ok, the second error is probably not that critical, but that first error is likely the cause of your issue. The script above is using jquery to select elements, and to resize the iframe. I would try replacing all instances of "jQuery" with "$j" in that script, which should resolve it.

joshehren · ‎05-11-2017

Thank you, Jonathan. Having replaced the 'jQuery' values in the client script, I now get the following error in the Developer Console:

Uncaught TypeError: jQuery(...).live is not a function

at HTMLDocument.<anonymous> (js_includes_customer.jsx:233)

at i (js_includes_doctype.jsx:23106)

at Object.add [as done] (js_includes_doctype.jsx:23106)

at n.fn.init.n.fn.ready (js_includes_doctype.jsx:23106)

at editPage (js_includes_customer.jsx:232)

at js_includes_customer.jsx:226

at F (js_includes_doctype.jsx:18)

It looks like I need to replace '.live()' with '.on().' Just trying to find out where this needs to happen...

Thanks,

josh