Monday, November 17, 2008

Getting Rid Of Scrollbars In Page Viewer Web Part

I have seen quite a few posts on this issue.

It's no secret that the Page Viewer Web Part is really just an iframe under the covers. The problem is getting it to resize itself to the content within it.

One option would be to simply set the size of the page viewer Web Part statically. That would be a good option if you knew exactly how large and wide your content would be, it was the same size of every page and all users had the same screen resolution.

Not likely.

A better option is to resize the iframe with a little javascript.

The key here is that we are not going to use a Page Viewer Web Part, but we are going to use a Content Editor Web Part. We are then going to put in some css and javascript along with our own iframe to make this work.

(Taken from a post on ASP.NET)

<style type="text/css">
.Myframe
{width:100%; height:expression(document.body.clientHeight-200);}
</style>
<iframe id="I1" name="I1" class="Myframe" width="100%" frameborder="0" >
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<script type="text/jscript" language="javascript">
I1.location.href= 'www.yourURLhere.com';
</script>

Change the I1.location.href tag to be your url of course.

Now we get a page that sizes itself to the size of the SharePoint page, but we still get 2 scroll bars - however - we are getting closer.

So now it begins to get tricky because what we really need to do is resize the underlying window to its max height/width needed before the CEWP (Content Editor Web Part) kicks in and resizes.

You can add the following code to the top of each page that you are loading in the CEWP and it will resize your page so that you get only 1 scrollbar...

<script type="text/javascript">
function resizeMe(that) {
window.resizeTo(document.body.scrollWidth, document.body.scrollHeight + 30); //increase or remove the buffer (30) as needed
}

window.attachEvent("onload", function() {
window.setTimeout("resizeMe()", 100);
});

</script>

Now you may get a horizontal scroll bar that is exactly the width of the screen. This is a limitation I have just come to live with. It's a far cry from where we started with a simple Page Viewer Web Part.

2 comments:

Alastair said...

Has anyone got this to work outside of IE7?

Thomas Burke Holland said...

This will only work in IE due to the javascript tag that is used that refers to "that".