Function

$().SPServices.SPSetMultiSelectSizes

Certification

Certified for SharePoint 2007 Certified for SharePoint 2010

Functionality

The SPSetMultiSelectSizes function sets the sizes of the multi-select boxes for a column on a form automagically based on the values they contain. The function takes into account the fontSize, fontFamily, fontWeight, etc., in its algorithm.

NOTE: If you are also calling SPCascadeDropdowns for a column, it's best to call SPSetMultiSelectSizes first. This way, SPSetMultiSelectSizes will take into account all of the potentially available values and adjust the multi-select boxes accordingly. SPSetMultiSelectSizes does not re-fire as the selection is changed.

Syntax

$().SPServices.SPSetMultiSelectSizes({
	multiSelectColumn: "",
	minWidth: 0,
	maxWidth: 0
}); 


multiSelectColumn
The DisplayName of the multi-select column in the form

minWidth
If present, the width of the multi-select boxes will not be set narrower than this number of pixels. If either minWidth or maxWidth is greater than zero, then they provide the lower and upper bounds (in pixels) for the width of the multi-select boxes.

maxWidth
If present, the width of the multi-select boxes will not be set wider than this number of pixels. If either minWidth or maxWidth is greater than zero, then they provide the lower and upper bounds (in pixels) for the width of the multi-select boxes.

Examples

In the example below, I'm calling the function for the Web Service Operations multi-select column. As you can see in the image below, quite a few of the available options are too long for the multi-select picker as it is rendered out of the box. While you can scroll to the right to see the rest of the values, this can often lead to mistakes in data entry. As you can see, it would be very easy to choose the wrong value from among those which start with "GetGroupCollection" unless you scroll to the right.


$(document).ready(function() {
  $().SPServices.SPSetMultiSelectSizes({
    multiSelectColumn: "Web Service Operation"
  });
  // You can include other script which you want to run at page load in this block as well
});

After the function call, the multi-select picker is widened appropriately based on the contents of the picker, regardless of the font characteristics. (Note that there is an even longer option below for GetRolesAndPermissionsForCurrentUser.) Because the function's algorithm works based on a jQuery clone() of the original select, it works fine with any font, whether it is proportionally or fix spaced.

Last edited Feb 25, 2011 at 9:44 PM by sympmarc, version 13

Comments

mstabile75 Mar 9, 2015 at 10:53 PM 
Used the below to find all the multiselect fields and auto size them in a form.

$("select[multiple='multiple']").each(function () {
if ($(this).prop('title').match(/possible values/g)) {
var multiFldName = $(this).prop('title').replace(/possible values/g,"").trim();
$().SPServices.SPSetMultiSelectSizes({
multiSelectColumn: multiFldName
});
};
});

tmorel Sep 30, 2013 at 12:53 PM 
Is there anyway I can get the actually form to change size as well when the multi select changes as well? Just because I have the selector boxes change in size but then I have to scroll across still to see the one on the right

m00s Jun 18, 2013 at 9:01 PM 
Wondering if this can be used on Kwiz's Cascading Lookup Multi-Select field? What modifications would i need to make in order to make it work? Any help would be appreciated, thanks.