Link to home
Start Free TrialLog in
Avatar of RodneyGee
RodneyGeeFlag for United States of America

asked on

How to adjust width of SharePoint Lookup Field Multi-Select

I have a list form containing several multi-select lookup fields.  A multi-select lookup field has two boxes.  The box to the left contains the lookup values and the right box contains the values selected/added from the left had side box.  The default size of these boxes are too small for the allowable values, thus making for a poor user experience when determining which value to select.
How can one expand the width of these boxes?
Avatar of rebejones
rebejones

Avatar of RodneyGee

ASKER

Thanks but this does not address how to modify the widths of the left and right side boxes for a multi-select lookup fiield.  
I found this article prior to submitting the question on Experts exchange, but did not understand how to execute it.  The article calls for creating a function that sets the width sizes, and then using a script that call the function.  I need assistance with where the to store the function and where to place the script that calls the function.  Can you provide guidance for that?
Thanks
1. First you are going to need to download SpServices and jQuery files. I usually make a utilities document library and put them in there.
2. Next go to the list you want to expand the multi-select box on and click on new.
3. Now click on Site Actions and Edit page- If the Edit page is grayed out then put (toolpaneview=2) without the parentheses in the address bar i.e. if my page is http://site.com/lists/testlist/newform.aspx?RootFolder... take out RootFolder and everything after it and replace so that your address reads http://site.com/lists/testlist/newform.aspx?toolpaneview=2
4. Add a content editor webpart to the page below your list. Click to edit the webpart and select Source Editor- This is where you are going to place your code.
5. Your code will be as follows: Make sure to change the first two lines to where you placed your jQuery and and SPServices files. For instance if you put it in a document library called utilities then you will change the lines to read something like: <script language="javascript" type="text/javascript" src="http://something.com/utilities/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" srchttp://something.com/utilities/jquery.SPServices-0.5.6.min.js"></script>

The quick way to get this is to open up notepad and go to the document you uploaded and right click on it and copy the short cut. Paste it into notepad and then copy the other link and paste into notepad then copy into the code. Based on the code you can put a min and max but I would let it default itself instead of trying to figure out how big it should be.  Before closing the Content Editor WebPart you will need to hide it so it doesn't show on the page. Click on Layout and check the check box next to hidden. Let me know if you need more help.
 
<script language="javascript" type="text/javascript" src="/jQuery%20Libraries/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/jQuery%20Libraries/jquery.SPServices-0.5.6.min.js"></script>

$().SPServices.SPSetMultiSelectSizes({
	multiSelectColumn: "name of your column",
	});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of rebejones
rebejones

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Did you have any problems implementing the code?
Not at all.  Your extra tip on the toolpaneview2 was also very appreciated, as the newform page initially did not allow for an edit page.
Thanks again, your advice was A+++!
You are welcome. Also if you want th width of the box extended on the edit page and display page you are going to have to do the same thing as above for those pages.
Do I receive credit for helping you?
Top notch assistance.  Went the extra mile to help solve my question.  Thanks.
Hello,
I thought I did award full credit on 7/12 by accepting the solution and providing "A" grades.  I thought it awarded the full points for the question, I believe 500.