Setting Multi-Select Widths in a SharePoint EditForm.aspx Using JavaScript

<UPDATE date=”2009-01-25″>
I now have a function in my jQuery Library for SharePoint Web Services called SPSetMultiSelectSizes which accomplishes this in a more robust way, taking into account the font, font size, etc.
</UPDATE>

When you have a multi-select lookup column in a list, SharePoint provides you with a control that shows two select boxes next to each other on EditForm.aspx.  There are two buttons (‘Add >’ and ‘< Remove’) that let you move values between the two, selecting or deselecting the values.

By default, the select boxes are a fixed width and, in many cases, not wide enough to let your users see the values very well.  The following JavaScript will set the widths of the select boxes based on the length of the longest value available in the lookup.  It isn’t fully multipurpose, as I wrote it for a specific instance with a particular set of branding (font size, spacing, etc.) but it ought to give you a very good start to use it yourself.  (With the fonts that I was using, I found that 7 times the number of characters in the longest value worked well to calculate the right width.  You’ll probably need to experiment.)  Pass in the name of the column you want to adjust.

// setSelectWidth: Set the width of a lookup column's select box based on the values it contains
// Arguments:
// columnName: The name of the column which is being displayed in the select box
//
function setSelectWidth(columnName) {

  var charFactor = 7; // Approximate pixels per character

  // Left side
  leftColumnSelect = getTagFromIdentifierAndTitle("select","",columnName + " possible values");
  if(leftColumnSelect != null) {
       leftColumnSelectDIV = findParentElement(leftColumnSelect, "DIV");
  }

  // Right side
  rightColumnSelect = getTagFromIdentifierAndTitle("select","",columnName + " selected values");
  rightColumnSelectDIV = findParentElement(rightColumnSelect, "DIV");

  // Find the longest value
  var longestValue = 0;
  for (var i=0; i  leftColumnSelect.options.length; i++) {
    if(leftColumnSelect.options[i].text.length > longestValue) {
      longestValue = leftColumnSelect.options[i].text.length;
    }
  }
  for (var i=0; i < rightColumnSelect.options.length; i++) {
    if(rightColumnSelect.options[i].text.length > longestValue) {
      longestValue = rightColumnSelect.options[i].text.length;
    }
  }

   // Set the widths of the two selects and their containing DIVs
   var newWidth = charFactor * longestValue;
   leftColumnSelectDIV.style.width = newWidth;
   leftColumnSelect.style.width = newWidth;
   rightColumnSelectDIV.style.width = newWidth;
   rightColumnSelect.style.width = newWidth;
}

This function builds on the getTagFromIdentifierAndTitle function provided in an excellent blog post I’ve referenced before over at the Microsoft SharePoint Designer Team Blog.  I’ve also created a findParentElement function you’ll see called above, which finds a specific parent element for a tag.  The code for this is below:

// findParentElement: Find an object's specified parent element
// Arguments:
// thisElement: The element you want to search from
// parentTag: The parent tag you want to find
//

function findParentElement(thisElement, parentTag) {
  var currentElement = thisElement;

  while(currentElement.tagName != parentTag) {
    currentElement = currentElement.parentNode;

    //alert(currentElement.tagName);
    if(currentElement.tagName == parentTag) {
      //alert('HIT:' + currentElement.tagName);
      return currentElement;
    }
  }
  return null;
}

Similar Posts

32 Comments

  1. Hi Marc,
    This is great. I placed the the javascript function into a hidden CEWP I have on my editform.aspx page, but how can it be called?

    Thanks,
    Ninel

    1. Rockie:

      As I answered over in the SPServices Discussions, setting the height is much simpler, and you should be able to do it pretty easily with jQuery. The width is trickier because it depends on the font size, etc.

      M.

  2. Marc, thank You twice!

    To modify height I used code from Your library too :) Thank You very much, works perfect and I see jQuery is not so difficult as I thought :)

  3. Marc,
    Excellent information!! Thanks for posting. In my case, I was looking for a way to count how many items the user selected in the multiselect lookup column. Yours is the only blog/website where I see that I needed to add the string ” selected values” to my column name when calling getTagfromIdentifierandTitle. I was searching for hours and could only find the standard information regarding the use of getTagfromIdentifierandTitle. Just wanted to thank you for taking the time to share this obscure detail.

    1. Wavryder:

      Glad to be of help. You should probably get familiar with digging into the DOM with one of the DOM inspectors like the IE Developer Tools if you are going to do this sort of thing.

      M.

  4. Hi!

    May you provide a step by step guide how to implement this, please?

    I added an issue tracking app on a Sharepoint 2013 site and have exactly this problem of too narrow multiselect lists (related issues) on the new/ edit form for this list. What code do I need to store where?
    Is above to be used with a Content Editor web part? I guess so. But I don’t get how to use your solution.

    Note, that I’m not a site collections administrator. I’m just a member of the owners group of a Sharepoint site.

    Many thanks,
    Jamil

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.