Problems adjusting the list Sharepoint​:FormField width

I’ve been doing some work on a SharePoint 2007 application and have a custom list where one column looks for data in other list. Everything works as expected but I hit a problem with the formatting of the field on the New and Edit forms for the list. On the default forms the FormField doesn’t auto expand to show the full width of the text being reference as shown below…

I’ve used SharePoint Designer to create custom forms layouts a few times before and along with some formatting requests from the customer created a couple of custom form equivalents for the list. The forms work fine and the customer is happy with the formatting except for this width issue.
I tried a number of things from setting properties on the control to overriding what styles I thought were being applied but I still couldn’t find a way to adjust the width of the text boxes. When I tried custom CSS I was at best only able to adjust the width of the FormField control but the text boxes don’t auto resize (as shown below) even though you can see the control is now wider. We’ve tried adjusting the DisplaySize property on the control and it makes no difference either.

What seems to be happening when you look at the HTML behind the page is that the Form Field control (SharePoint:FormField) is outputing the select boxes wrapped in a DIV tag that uses inline styles and not a CSS class. This makes it difficult to override the width and height settings for the select boxes.

 One suggestion was to look for the next parent that has a sensible ID (not dynamic GUID) or class applied and override the styles making sure you use the !important operator to ensure that the inline style is overridden e.g.  something like: table:first-child span table div.areatemplate-selection-panel select {width: auto !important} 

After some discussion on the OzMOSS mailing list Mark Burns provided the following solution based on to idea wrapping the control in a named DIV tag and then using JavaScript on the body load to parse the tags inside the DIV and modify the height and width styles. For more detail on this approach to modifying styles refer to the SharePoint Designer Team Blog entry 

Relevant code I used is shown below:


<script type="text/javascript">
function removeLocalStyleAttributes() {
   var coll = document.body.getElementsByTagName("div");

   for(x=0;x < coll.length; x++)
      if(coll[x].className == "select-container") {
         var collDivControls = coll[x].getElementsByTagName("DIV");

         for(y=0;y < collDivControls.length; y++)
            collDivControls[y].style.width = null;
            collDivControls[y].style.height = null;
.select-container div{
                      height:400px; }
<td width="400px" valign="top">
    <div class="select-container">
          <SharePoint:FormField runat="server" id="ff13{$Pos}" ControlMode="Edit" FieldName="OSCompatibility" __designer:bind="{ddwrt:DataBind('u',concat('ff13',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@OSCompatibility')}"/>

Leave a comment

Filed under General SharePoint Development, Microsoft Office Sharepoint Server 2007

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s