Sharepoint 2007: How do I modify width of Multiple Select boxes

This refers to a question raised by ironhide1975 on here (http://www.experts-exchange.com/OS/Microsoft_Operating_Systems/Server/MS-SharePoint/Q_23508809.html).

I want to acheive the same result as in the above question but have been unable to get the accepted solution to work.  Can anybody advise on how to use ironhide1975's java script to get the column sizes to change?

I have tried the Javascript in a few different forms in the page but am getting the error 'This Web Part does not have a valid XSLT stylesheet: Error; A name contained an invalid character, for (var i=0; i<elements.length; i++){'

I don't really have much experience with this but need to change the width of the Multi Lookup Picker on the Sharepoint forms so any advice you can give would be much appreciated.

For reference I have added a picture of the page that I am working on.  It is the two Multi Select boxes under the heading 'Related Items' that I want to change the width of so that each takes up nearly half the page (and makes the contents inside them more visible)

Thanks,
Phil

</script> <script type="text/javascript">   
 
function MultiWidth() 
 
var elements = document.getElementsByTagName("div");  
   
for (var i=0; i<elements.length; i++){  
   
  if (elements[i].style.width == "143px")elements[i].style.width = "400px";  
 
} 
</script>

Open in new window

faq-page.bmp
LVL 1
PhilMacavityAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CloudedTurtleCommented:
Have you tried using a different var name? The Elements word is an defined object in Javascript. Try changing it back to "Divs" as done by IronHide if you haven't already.
 
0
PhilMacavityAuthor Commented:
Thanks for taking a look at this.  I have tried a few different var names in the testing (including divs) but none have worked.  Do you have any other ideas as to what could cause this?

Thanks,
Phil
0
CloudedTurtleCommented:
Could you post the "View Source" results on this form? (I want to see the client side HTML that is getting rendered) This may give me some other ideas...
 
0
10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

PhilMacavityAuthor Commented:
The source code from that section of the page is below.  Let me know if you need any more.  There are two lines each which contain 'width:143px' which is what I beleive specifies the size of the columns.

Note that in this source I have replaced the listing of all of the documents inside the mulipicker with '(all of the list items go here - i have removed do to confidentiality)'

Thanks
<tr><td valign="top" class="ms-formlabel" style="height: 5px;" colspan="3"></td></tr><tr><td valign="top" class="style19" colspan="3">Related Items</td></tr><tr><td valign="top" class="style17" colspan="3"><span dir="none">
		<input id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker" name="ctl00$PlaceHolderMain$g_5710757f_eb78_4dd4_b174_85baed5b2c43$ff5_1$ctl00$ctl00$MultiLookupPicker" type="hidden" value></input><input id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_data" name="ctl00$PlaceHolderMain$g_5710757f_eb78_4dd4_b174_85baed5b2c43$ff5_1$ctl00$ctl00$MultiLookupPicker$data" type="hidden" value="(all of the list items go here - i have removed do to confidentiality)"ctl00$PlaceHolderMain$g_5710757f_eb78_4dd4_b174_85baed5b2c43$ff5_1$ctl00$ctl00$MultiLookupPicker$initial" type="hidden" value=""></input>
		<table class="ms-long" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td class="ms-input">
					<div style='width:143px;height:125px;overflow:scroll'><select name="ctl00$PlaceHolderMain$g_5710757f_eb78_4dd4_b174_85baed5b2c43$ff5_1$ctl00$ctl00$SelectCandidate" id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_SelectCandidate" multiple="multiple" title="Related Items possible values" onchange="GipSelectCandidateItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipAddSelectedItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
		</select></div>
				</td>
				<td style="padding-left:10px">
				<td align="center" valign="middle" class="ms-input"><button id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_AddButton" class="ms-buttonheightwidth" onclick="GipAddSelectedItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m); return false"> Add &gt; </button><br>
					<br><button id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_RemoveButton" class="ms-buttonheightwidth" onclick="GipRemoveSelectedItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m); return false"> &lt; Remove </button>
				</td>
				<td style="padding-left:10px">
				<td class="ms-input">
					<div style='width:143px;height:125px;overflow:scroll'><select name="ctl00$PlaceHolderMain$g_5710757f_eb78_4dd4_b174_85baed5b2c43$ff5_1$ctl00$ctl00$SelectResult" id="ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_SelectResult" multiple="multiple" title="Related Items selected values" onchange="GipSelectResultItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipRemoveSelectedItems(ctl00_PlaceHolderMain_g_5710757f_eb78_4dd4_b174_85baed5b2c43_ff5_1_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
		</select></div>
				</td>
			</tr>
		</table>

Open in new window

0
CloudedTurtleCommented:
Where is the rendered code are you calling your javascript Function? I assume that you are declaring your fuction at the top.
 
0
PhilMacavityAuthor Commented:
I have tried putting it in a few places.  One of which was directly above the source code above.  Is there anywhere specific that the java script should be sitting in the code (I have very limited experience with doing this)?
0
CloudedTurtleCommented:
Generally you should place the calling function at the end of all the other code, or use a Click event or something similar to call the function on an action.
Because Javascript is a client side scripting language, the browser parses it and performs the functions, because of this you need to call your functions after the controls have rendered on the page or the script will think that the objects don't exist. HTML renders linear, so the top gets parsed first.
0
PhilMacavityAuthor Commented:
I have got this working using a different java script and jquery.  The script at the top of this thread does not work.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.