Eliminate Scrollbars in Salesforce sControls

Eliminate Scrollbars in Salesforce sControls

Many new salesforce.com AJAX developers ask me how I am able to build my sControls into a frame and get the sizing setup in such a manner to prevent scrollbars. Over the years I've tried many different JavaScript functions but found that one works better than any I've seen.

For those reading this that might be unfamiliar with what I'm referring too I've included a screenshot.

In some instances an AJAX developer may want to build a sControl into salesforce.com whereby the sControl is embedded into the page. Basically there are tabs at the top and the navigation bar on the left-hand side with the sControl on the right-hand side.

When the web tab containing a sControl is setup through the Salesforce.com user interface the developer is allowed to dictate the size of the frame in which the sControl gets loaded. In most cases these new developers will simply alter that frame size to account for the largest height that may occur in the sControl. However, the script that I will eventually share with you will allow these developers to now ignore this pixel height setting and resize the frame dynamically.

I started using the script a year or two ago and a few months ago I altered it a bit because I was still getting scrollbars in Firefox. I found that the scrollbars didn't always occur but I wanted to account for the percentages and try to eliminate them in entirely. Therefore, I decided to add a line where I determine if the browser is Firefox and then add 10 pixels to the adjusted frame height. I found that this truly eliminates the vertical scrollbars in almost 100% of the instances where I've used this script.

So let's get to it. The script itself is:

//resizes the frame holding the sControl to make up for odd dimensions
function resizeFrame() {
	var sframe = parent.document.getElementById("itarget"); //get id of iframe from parent
	if (navigator.userAgent.indexOf("Firefox") != -1) { //if Firefox
		var nHeight = document.body.scrollHeight+10; //add ten pixels to height of sControl frame
	} else { //otherwise
		var nHeight = document.body.scrollHeight; //use the returned height of sControl frame
	}
	sframe.style.height = nHeight+"px"; //set the frame height to correspond to the content
}

And it can be called using this line:

resizeFrame(); //calls function from above

I hope you find this useful or can tweak it to meet your needs.