How to add a scrollbar to CRM web pages

One of the changes between version 3 and 4 of Microsoft Dynamics CRM is how it renders web pages within CRM. This use to supply handy scrollbars when the page was too long, now it just cuts the page off. Fairly annoying if you need to see that extra content you spent ages getting just right!

Fear not, there are a couple of ways of getting round this. The best though in my opinion is to surround your content in a div and give it an id "Frame" and a style="overflow:auto". This won't work on its own as you need to supply a height for the scrollbar to show.  One thing you need to be careful of is remembering that users of CRM have different resolution monitors and the height won't always be a known constant. This is why we give the div an id. It allows the element to be found through JavaScript so that the height can be calculated on the fly.

This JavaScript goes in the head of the page.  To call the function, add onload="calcHeight();" and onresize="calcHeight();" to the body tag. This will cause the height to be calculated when the page first loads and if the whole window is resized.  Happy Scrolling!

<script type="text/javascript">
//function will set the height and width of the iframe 
function calcHeight()
{
//initialize variables
var main_height = null;
var height = null;

// for all except Explorer
if (self.innerHeight) {
main_height = self.innerHeight;
// Explorer 6 Strict Mode
} else if (document.documentElement && document.documentElement.clientHeight) {
main_height = document.documentElement.clientHeight;
// other Explorers
} else if (document.body) {
main_height = document.body.clientHeight;
}
//set final height and width
height = main_height + 'px';

//change the height of the iframe
document.getElementById('frame').style.height=height;
}
</script>