Saturday, August 26, 2017

Removing NOBR tags from a SharePoint 2010 page.

When editing a list item in a SharePoint 2010 list. If your column names are very long, the column label can take over the width of your screen, forcing you to scroll to see or update the column value. The following style entry should take care of the problem by setting your Label width column to an arbitrary width.

<style>
td.ms-formlabel 
{
   width: 35%; 
   white-space: normal;
}
</style>

 Unfortunately, this doesn't fix the problem when in edit view. The styling alone doesn't fix the problem because the EditForm.aspx pags contain the deprecated <NOBR> tags. The purpose of the <NOBR> tag was to prevent the containing text from wrapping. To solve the problem, you need to remove the <NOBR> tags with scripting, as shown below.

<script>
var nobr = document.getElementsByTagName("nobr");
for (i=0; i < nobr.length; i++)
{
  var ih = nobr[i].innerHTML;
  nobr[i].style.display = "none";
  var sp = document.createElement("span");
  sp.innerHTML = ih;
  nobr[i].parentElement.appendChild(sp);
}
</script>

The script takes the inner html of the NOBR tag, places it in a span, and then appends the span to the NOBR tag's parent. The NOBR tag is then hidden from view.

In later versions of SharePoint, these tags have been replaced with WHITE-SPACE styling.

No comments:

Post a Comment