Re-sizing Web Zone in SharePoint Dashboards

A SharePoint Dashboard is a web page made up of web parts. Web Parts exist within containers called Web Zone. In SharePoint, while the properties of the web part are exposed to the Dashboard Designer, the web zone is virtually untouchable. Often Dashboard Designers find it annoying to discover that their web part is either too big (leaving ugly scroll bars) or too small (leaving empty space) for the web zone and they are not able to modify the dimensions of the web zone. The key to fix this problem is to understand that the web zone is just an overlaying container for your web parts. This means that the dimension of the web zone is determined by the dimension of the web parts that it contains. That’s good news because by modifying the dimensions of the web parts, the Dashboard Designer can exercise complete control over how the web zone and ultimately the dashboards appear.

To illustrate this, I built a simple dashboard that contains a Page Viewer web part. The Page Viewer web part links to my website. At first, I leave the Height and Width as default (fit to zone). The result is I get a disoriented dashboard with a cramped web page surrounded by ugly scroll bars with miles of empty spaces filling up the rest of dashboard (shown in Figure 1).

Figure 1 - With Default Dimensions
Figure 1 - With Default Dimensions

I would like to see the Page Viewer web part display my website in a full page without any unintended scrollbars and empty spaces. So I modify the Page Viewer web part‘s Height to 800px and leave the Width as before to fit the zone width (as shown in Figure 2). The result is now I get a clean, crisp dashboard page as intended.

Figure 2 - After Re-Size
Figure 2 - After Re-Size

 If the web zone contains more than one web part, then the width of the web zone would be width of the widest web part and height of the web zone would be the sum of heights of all web parts within that zone.

BENNY AUSTIN

2 thoughts on “Re-sizing Web Zone in SharePoint Dashboards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s