Customize drop-down fields for SPLists

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:


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:

<!-- customization start -->
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";
  } }
<!-- customization end -->

Skip to main content