Set the width of multiple lookup fields in SharePoint via jQuery

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');

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


6 thoughts on “Set the width of multiple lookup fields in SharePoint via jQuery”

  1. 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.

    1. Hi there,
      You don’t need SPServices for this. Make sure your link to jquery.js is correct..

  2. 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.

  3. 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

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