SharePoint: Synchronize Document Library Web Part Column Widths

When you add document library web parts to a page, SharePoint automatically sets the width of the columns leaving you with multiple web parts, all with different column widths, and an unstructured look to the page.

Synchronizing the column widths can be done with yet another Content Editor Web Part (CEWP) trick. The trick this time is finding something in common across all of the library web parts on a page, and it turns out that this is the table ID: "onetidDoclibViewTbl0". It looks like this ID is used for Document Libraries and Wiki Libraries.

The JavaScript below will take the column widths from the first web part on the page and then adjust the column widths for all other library web parts on the same page. This should only impact library web parts, and not others such as Tasks or Calendars, but you will need to do some testing!

Steps:

1. In 2010 create a Notepad file with the 2010 version of the code. Save the file to a local drive and then upload to a SharePoint library in the site. In the library, right-click the file name, click Properties and copy the URL to the file. In the Content Editor Web Part, paste the URL in the Source Link box. Site Actions, Site Settings, Edit Page
2. Add a Content Editor web part and move it below the library web parts
3. Click Edit, Modify Shared Web Part
4. In the Appearance section set the title of the web part to something like “Document Library Column Width Adjuster” so you will know what it is for six months from now.
5. In the Appearance section find Chrome and select None to hide the title bar
6. In 2007 click Source Editor and paste the following JavaScript

 

The Code

(this is the 2007 version, scroll down for the 2010 version)

<script type="text/javascript" language="javascript">

function CoordinateColWidths() {

try
{

  //find all document library web parts
  var x = document.all["onetidDoclibViewTbl0"]

  //Get first table's column widths
  var cw = []
  var j
  for (j=0;j<x[0].rows[0].cells.length;j++)
  {
    cw[j] = x[0].rows[0].cells[j].offsetWidth
  }

  //Set all other tables
  var i;
  for (i=1;i<x.length;i++)
  {
    for (j=0;j<cw.length;j++)
    {
      x[i].rows[0].cells[j].width = cw[j]
    }
  }

}
catch(err)
{
  txt="<font size=1>There was an error adjusting column widths.<br/>";
  txt+="Error description: " + err.description + "</font>";
  CoordinateColWidthsErr.innerHTML=txt
}
}

//call only after page fully loaded
_spBodyOnLoadFunctionNames.push("CoordinateColWidths")

</script><span id=CoordinateColWidthsErr></span>

 

Watch outs and warnings!

• This has not been tested in a production environment – you are on your own! (Please let me know if it works or does not work for you)
• So far I have only tested this:
• in IE 6 on a MOSS Enterprise installation, but it should work in WSS.
• in IE 7, IE 8 and Firefox in SharePoint Server 2010
• As this uses a hidden web part, remember to document this somewhere so you can recreate the site when needed..
• Batteries not included, your mileage may vary…

Have fun, and let me know if this works or does not work for you.

 

Code for 2010

<script language="javascript" type="text/javascript">

// SP 2010 version

function CoordinateColWidths() 
{
  try
  {

    //find all document library web parts
    var x = [];
    var tables = document.getElementsByTagName("table");
    for (var i=0; i<tables.length; i++)
    {
      if (tables[i].id=="onetidDoclibViewTbl0")
      {
        x[x.length]=tables[i];
      }
    }

    //Get first table's column widths
    var cw = [];
    var j;
    for (j=0;j<x[0].rows[0].cells.length;j++)
    {
      cw[j] = x[0].rows[0].cells[j].scrollWidth-16;
    }

    //Set all other tables
    var i;
    for (i=1;i<x.length;i++)
    {
      for (j=0;j<cw.length;j++)
      {
        x[i].rows[0].cells[j].width = cw[j];
      }
    }

  }
  catch(err)
  {
    txt="<font size=1>There was an error adjusting column widths.<br/>";
    txt+="Error description: " + err.description + "</font>";
    CoordinateColWidthsErr.innerHTML=txt;
  }
}

//call only after page fully loaded
_spBodyOnLoadFunctionNames.push("CoordinateColWidths");

</script>
<span id="CoordinateColWidthsErr"></span>

 

 

.