Customize drop-down fields for SPLists

  • Article

All of us love to use lookup columns. A lot.
But what happens when you add two lookup fields to a custom list, one of them pointing to a source list with say 35 items, and the other one pointing to a source list with 5 items? We noticed that the drop-downs in the NewForm.aspx and EditForm.aspx pages are not rendered in the same way ...

The cause? Check the Microsoft.SharePoint.WebControls.LookupField.CreateChildControls() inside Microsoft.SharePoint.dll:

 if ((((this.DataSource != null) && (this.DataSource.Count > 20)) && (!base.InDesign && SPUtility.IsIE55Up(this.Page.Request))) && !SPUtility.IsAccessibilityMode(this.Page.Request)) { ... }

Interesting, isn't it? But how is the CSS styling defined for this type of fields?
Well, you'll find the answer inside \12\TEMPLATE\LAYOUTS\1033\STYLES\CORE.CSS:

 .ms-lookuptypeintextbox
{
width:20em;
vertical-align:middle;
}

So what can we do to have some dynamically expanding drop-downs for these fields? You could try something as follows, inside the master page used by your NewForm.aspx and EditForm.aspx pages:

 </BODY>
<!-- customization start -->
<SCRIPT>
function findAndEdit() {
  var nodeList = document.getElementsByTagName("input");
  for (var i=0; i<nodeList.length; i++)
  if (nodeList[i].className == "ms-lookuptypeintextbox") {
    var choices = nodeList[i].getAttribute("choices").split("|");
    var maxLength = 1;
    for (var j=1; j<choices.length; j++)
      if (choices[j].length > maxLength)
        maxLength = choices[j].length;
    nodeList[i].style.width = (maxLength*7) + "px";
  } }
findAndEdit();
</SCRIPT>
<!-- customization end -->
</HTML>