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:

Add your document library web parts to the page.

Add a Content Editor web part

1. 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. Click Source Editor

Paste this JavaScript:

 

<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 on a MOSS Enterprise installation, but it should work in WSS.
• 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.

 

.