Wednesday, 25 July 2012

Page Viewer Web Part - dynamic height width - no scroll

You will come across the challenge of vertical/horizontal scroll bars in case of hosting custom .net application or some external web page under page viewer web part. One quick fix is to set the height/width to maximum value. This way scroll bars won't appear, but this configuration will fail when user jumps between the external pages of different heights/widths. For example, if you host pageA under PVWP and if pageA has links to some other pages then those pages may have different dimensions which could potentially invalidate your maximum height/width settings. Also if your client is bit fussy in terms of look & feel then this goes into "litter".

Lately, I had to host and integrate .net application with SharePoint 2010. First challenge was to resolve the dependencies which include, .net framework, ajax etc etc. After resolving all dependencies, I managed to integrate and run .net application successfully under SharePoint context. There can be numerous options  to integrate application with SharePoint(e.g: using 14 hive to deploy your custom pages/web controls etc). I will park this discussion for now, may be another post for future on applications integration with SharePoint. For this discussion I want to just point out the fact that you will either host your aspnet pages under page viewer web part or use iframe with CEWP (content editor web part, quite popular one :-) !!!).

Instead of using page viewer web part, I suggest to use CEWP with iframe. With the help of some javascript you will be able to make scroll bars dynamic not just for one page but across multiple pages (in case external page has some other contents/links).

Here are the steps to host external web page with dynamic height/width:

  1. Add Content Editor Web Part
  2. Edit CEWP html and add javascript code as mentioned below
  3. Replace {link} with the actual page link
  4. Save & Close, Publish and do whatever you like to preview your contents

Little bit about code:
The code is tested with all major browsers including IE, firefox, chrome, safari, opera. In case you find any browser compatibility issues, please let me know.

1 comment:

Anonymous said...

Your solution didn't work for me. The iframe becomes fixed and doesn't resize when browser resizes.