Question : Resize multi select boxes in SharePoint form

I have a SharePoint form where users can select printer cartridges (model - modelnumber etc.). The problem is that the texts are way too long to fit in the 2 tiny boxes that's SharePoint default.

Any ideas on how I can change the appearance of these multi select boxes, so you can see more than about 20 characters of each option...

For now I can insert a custom form using SharePoint designer, but for now I can only resize the blue square on the attached image - not the 2 empty squares that will contain the Printer cartridges text...

Attachments:

SharePoint-multi-select-form.JPG (70 KB) (File Type Details) 

SharePoint Designer Screen Clip

Answer : Resize multi select boxes in SharePoint form

The renderingtemplate of these controls are defined in the folder CONTROLTEMPLATES within the HIVE folder, more specifically in DefaultTemplates.ascx using the RenderingTemplate MultipleLookupField.

So, navigate to:
c$\Program Files\Common Files\microsoft shared\Web Server Extensions\12\TEMPLATE\CONTROLTEMPLATES

Create a new .ascx and put the following code in there:

<%@ Control Language="C#"   AutoEventWireup="false" %>
<%@Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.WebControls"%>
<%@Register TagPrefix="SPHttpUtility" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.Utilities"%>

<SharePoint:RenderingTemplate ID="MyCustomMultipleLookupField" runat="server">
      <Template>
            <SharePoint:GroupedItemPicker id="MultiLookupPicker" runat="server"
                  CandidateControlId="SelectCandidate"
                  ResultControlId="SelectResult"
                  AddButtonId="AddButton"
                  RemoveButtonId="RemoveButton"
                  />
            <table class="ms-long" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                        <td class="ms-input">
                              <SharePoint:SPHtmlSelect id="SelectCandidate" Width="300" Height="125" runat="server" multiple="true" />
                        </td>
                        <td style="padding-left:10px">
                        <td align="center" valign="middle" class="ms-input"><button class="ms-buttonheightwidth" ID="AddButton" runat="server"> <SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,multipages_gip_add%>" EncodeMethod='HtmlEncode'/> </button><br>
                              <br><button class="ms-buttonheightwidth" ID="RemoveButton" runat="server"> <SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,multipages_gip_remove%>" EncodeMethod='HtmlEncode'/> </button>
                        </td>
                        <td style="padding-left:10px">
                        <td class="ms-input">
                              <SharePoint:SPHtmlSelect id="SelectResult" Width="300" Height="125" runat="server" multiple="true" />
                        </td>
                  </tr>
            </table>
      </Template>
</SharePoint:RenderingTemplate>
 

Now go to SharePoint Designer and find your field.

Now add the attribute TemplateName and put it's value to MyCustomMultipleLookupField, like the following line:
<SharePoint:FormField TemplateName="MyCustomMultipleLookupField" runat="server" id="ff2{$Pos}" ControlMode="Edit" FieldName="ccc" __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@ccc')}"/>

Issue an iisreset and take a look at your form.