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

Can you show me the code. Does it resize based on select items ? You can do it in CSS

Give your selects a ID or a CLASS name

<select name="select1" class="sel1">
....
</select>
<select name="select2" class="sel2">
....
</select>

Then reference them in your css
<style type="text/css">
<!--
.sel1{
      width: 200px;
      background: #ff0000;
      color: #ffffff;
}
.sel2{
      width: 200px;
      background: #ff0000;
      color: #ffffff;
}
// -->
</style>

Here's a sample

	<div style='width:143px;height:125px;overflow:scroll'><select name="ctl00$m$g_01c3523a_a1dd_40be_860a_8312dfdc9130$ctl00$ctl02$ctl00$ctl01$ctl00$ctl00$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" id="ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate" multiple="multiple" title="Primary research method possible values" onchange="GipSelectCandidateItems(ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipAddSelectedItems(ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
				</select></div>

Select allOpen in new window

The boxes are generated by Sharepoint so I can't control the ID.

I guess it uses some CSS automatically thats what thsi link says.http://blogs.msdn.com/sharepointdesigner/archive/2007/11/09/an-introduction-to-conditional-formatting.aspx
Check that and change as I mentioned.

Sorry I dont haev sharepoint installed here

jitganguly,
I appreciate your help but don't understand your last post, can you please elaborate?

All I wanted to say was , check whic css it uses and then use the example I provided on my first post to change the size

This part of the page doesn't use CSS, it hard codes the style right in the DIV (see code above).

Ok then why not use this

style="width: 200px;"

or change it to whatever size that fits

<div style='width:143px;height:125px;overflow:scroll'><select style="width: 200px;"name="ctl00$m$g_01c3523a_a1dd_40be_860a_8312dfdc9130$ctl00$ctl02$ctl00$ctl01$ctl00$ctl00$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" id="ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate" multiple="multiple" title="Primary research method possible values" onchange="GipSelectCandidateItems(ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipAddSelectedItems(ctl00_m_g_01c3523a_a1dd_40be_860a_8312dfdc9130_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
                        </select></div>

Right, that would be great but the problem is the div is automatically generated by Sharepoint and we can neither find the code for where it's generated in 2007, but any changes we'd tried to make to the CSS file have not taken (we were able to modify the width the single drop downs, but not the multiple drop downs). So we are hoping we could use Javascript to resize the items on the front client end. This way we wouldn't have to modify the Sharepoint code drastically.

ironhide1975

Are you able to let me know how you have put your above script into the aspx page to get this working?

I have created my own newform.aspx for a Sharepoint list.  I have tried your 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.

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>

Select allOpen in new window