Dynamic SharePoint web part width and height

Question

I am trying to dynamically adjust the width and height of a web part in a SharePoint web part page so that it fills up the entire available space. It appears that there is no way to choose a percentage for width and height from the web part property editor window in SharePoint. Also, trying to dynamically set it on the web part instance through code results in SharePoint throwing an exception to the effect that proportional dimensions are not supported.

Is there any way to do this using, for example, Javascript? I've seen similar things done using jQuery, but not exactly what I'm looking for (and I'm not familiar enough with jQuery to come up with something on my own).

Neuritis

It's really worth learning jQuery. It has a fairly short learning curve and there are plenty of examples on EndUserSharePoint: endusersharepoint.com/?cat=513 – Brimful

Answer 1

There is a web part available that does this here. You can also see a solution on TechNet communities from "potta vijay kumar" (where I found that web part too):

function calcHeight() 
{ 
  //find the height of the internal page 
    var the_height= 
    document.getElementById('contentpage').contentWindow. 
      document.body.scrollHeight; 

  //change the height of the iframe 
  document.getElementById('contentpage').height= 
      the_height; 
}

contentpage is the ID of the iframe.

A jQuery solution is available from EndUserSharePoint.

Brimful

Answer 2

Here's what I did:

I had an iFrame inside the middle webpart, where I will be loading webpages based on the left web part menu. So I took the <td> element where both the webparts are placed (its a <td> element with class set as ms-bodyareaframe)

var head=$('td.ms-bodyareaframe');
$("#myFrame").height(head.position.height()).attr('src',unescape(loc));
$("#myFrame").parent().height(head.height()-50);

This will perfectly re-size the webpart where the iframe resides.

Note: this may not work in all cases

Multivibrator

iframe: ick, often more trouble than it's worth – Steading