Custom tabs in Bullhorn are implemented as IFRAMEs hosted within the Bullhorn user interface. In a web browser, if the content of an IFRAME is longer or wider than the space afforded to it by the parent page, the window will automatically display scroll bars. While this behavior is sometimes desirable, in most cases it should be avoided.

When a Bullhorn user opens a custom tab, the width of the IFRAME in which your application or content will appear will vary depending on the resolution of their monitor, the size of the browser window and the configuration of their user interface. Since there is such a wide range of possible widths, you should design your content so that it can re-flow smoothly in widths ranging from 600 and 1300 pixels. This will prevent horizontal scroll bars from appearing in the user interface.

To ensure that no vertical scroll bars appear, the custom tab feature provides a way for your application to communicate its height to the hosting page. This communication is done via the URL configured for the custom component that is placed on the tab. To take advantage of this feature, you should add a URL variable called displayHeight to the URL when it is configured in the field map administration tool (for example, …/test.html?displayHeight=3000px). If no value is provided, the default height of the IFRAME is 4000px.

You can also dynamically modify the height of the IFRAME by changing the displayHeight variable after Bullhorn has initialized the IFRAME. This is useful if your custom tab page dynamically shows or hides regions of the DOM, or if users will navigate through multiple pages of different heights. The following JavaScript functions can be added to any page that appears in a custom tab:

function addResizeParameterToUrl()
{
    var size = document.body.scrollHeight;
    var currentHref = decodeURIComponent(getQueryStringParameter(location.href,
       "currentBullhornUrl").replace(/\+/g, " ")).replace(/:[0-9]+/g, "");
    var fragment="displayHeight=" + size;
    currentHref+="#" + fragment;
    parent.location.href=currentHref;
}
function getQueryStringParameter(href, paramName)
{
   var regexS = "[\\?&]"+ paramName +"=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( href);
   if( results == null )
	{
	   return "";
        } else {
	   return results[1];
	}
}

The hosting Bullhorn page will listen for changes to the displayHeight URL variable and adjust the dimensions of the IFRAME accordingly. To ensure this variable is updated, you must also attach the addResizeParameterToURL() function as a listener to the page’s onresize and onload events. This can be done by adding the following to the page’s body tag.

<body onresize="addResizeParameterToUrl();" onload="addResizeParameterToUrl();">

Depending on the amount of DOM scripting in your pages, you may also need to call this function from other places in your application as well.