Tag Archives: SharePoint 2007

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: 

td.ms-authoringcontrols 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;
         }
      }
   }
}
_spBodyOnLoadFunctionNames.push("removeLocalStyleAttributes");
</script>
-------------------------------------------------
<style>
.select-container div{
                      height:400px; }
</style>
-------------------------------------------------
<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')}"/>
   </div>
</td>
Advertisements

Leave a comment

Filed under General SharePoint Development, Microsoft Office Sharepoint Server 2007

Problems Caused by IE Developer Toolbar

I’ve had a shocker of a time over the last day or so after I installed the IE Developer Toolbar on my new Windows 7 64bit laptop. I had been trying to debug some issues with a custom SharePoint list form and having used the toolbar on my old laptop to great benefit and with no problems have no hesitation installing it on my new one.

I downloaded the latest version (1.00.2189.0) and proceeded to investigate the issue with cascading styles in my page. The first problem that I started encountering was that some web sites (unrelated to the SharePoint customisation I was looking into) would simply hang. This seemed to get progressively worse to the point where I would have to restart the browser.

Next Microsoft Word 2010 started to intermittently hit problems and close down. Again this got progressively worse until everytime I tried to open a document (both .doc and .docx) Word wouldn’t even open it before  the error dialog appeared and off it went on its merry way trying to work out what went wrong, notify Microsoft and then close down.

Thinking that it could be related to the installation of the developer toolbar I reluctantly uninstalled it and restarted Windows. This seemed to fix the issues with the browser hanging but Word still wouldn’t open documents so I tried doing a Repair of the installation of Microsoft Office 2010 Professional to see if this would fix the issues with Word. After completing the repair and restarting things seemed to be ok and I was able to work on a document review for a few hours last night.

BUT, when I logged in this morning and opened up a Word document I was immediately hit with the problem again. DOH!!!

As a last resort I reverted to the restore point prior to the installation of the IE Developer Toolbar and restarted Windows. This seems to have worked and I have been able to work on various Word documents and in IE without problems since. In my books this confirms without a doubt that the installation of the IE Developer Toolbar on my system was the cause of all these problems. From now on I’ll limit its use to my development server VM’s where I haven’t encountered this problem before.

Leave a comment

Filed under General SharePoint Development, Microsoft Office Sharepoint Server 2007, SharePoint 2010