Set the width of multiple lookup fields in SharePoint via jQuery

November 7th, 2011 | Posted by Marijn in code | css | jquery / javascript

This time we are taking a look at the multiple select lookup fields in SharePoint. You get a field like this when you create a new lookup column, and check the “allow multiple values” box in the additional column settings.

multiline field

It looks so tiny: we got a line with 2 select boxes and 2 buttons in the edit page:Behind it however, there are a lot of code lines: a few hidden input fields, a table, a select and ALL your data.

So what if your lookup lines are rather long ? After a close inspection of all the stuff that is there, you can see there are 2 select fields that actually matter. And to make things easy for us (thank your Microsoft), they even have really nice names as well:

The first one, which holds the list of possible values, has the title: “your field name possible values”. In our example here, the title is: “multiple lookup possible values”.
The second one, which holds the list of selected values, has (can you guess it already?) the title “your field name selected values”. In our example here, the title is: “multiple lookup selected values”.

This makes it very easy to grab the components and do all kinds of kinky things with it.

Code for setting the width:Important: for this to work, the setting “Launch forms in a dialog” in advanced settings has to be set to “no”. Make sure you link to the correct jquery file.

<script type="text/javascript" src="yoursite/yourlibrary/yourjquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('select[title="multiple lookup possible values"]').width(550);
    $('select[title="multiple lookup selected values"]').width(150);
});
</script>

If you want to grab all multiple lookup fields in SharePoint page at once, you can use:

$('select[multiple="multiple"]').width('300');

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

6 Responses

  • Tyler says:

    Thank you for this post. It saved me a lot of time.

  • Rockie says:

    Hi! Help me please if You have time, I’m new in jQuery.
    Do we need SPServices installed to do this this work?
    $('select[multiple="multiple"]').width('300');
    It is great, but when I add this code to ContentEditor webpart it does nothing. Is “multiple” a part of field ref name of field? Also there is no “Launch forms in a dialog” in my Advanced IE 8 settings.

  • Rockie says:

    Hi Marijn!
    Thank for Your response!

    Link was correct, but In my case I used SPServices and function from there to set height and width. There could be problems with russian(and possible other non-english editions) of sharepoint, but they coud be resolved.

  • ninel says:

    YOU ARE AWESOME!!!! This saved me sooo much time. 🙂

  • Ryan Kelly says:

    Thank Lord it worked! It took me an hour to find this thread, everything else was to complicated and not worth trying.



Leave a Reply

%d bloggers like this: