Modify the lengths of List Form Fields

Hi again, John here with a post that I hope will help out a lot of people.

The scenario is simple: You have just used SharePoint Designer to insert a Data View of some list. You have formatted the fields to be SharePoint:FormField controls, and now you want to change the size of those controls.

Why is this so hard? Well, the controls are rendered from the server (as are all asp.net controls) and so the markup (or HTML) used to make them display in the browser cannot be directly manipulated on the SPD design surface. What we need to do is determine the class SharePoint uses to render the size of the controls, and then override it via CSS.

For this demo, we'll use the default Title field from the default Announcements list. These steps also assume that you know how to create new pages and insert views on them.

  1. Make sure you have at least one announcement in your Announcements list
  2. Open your site in SharePoint Designer
  3. Create a new page based on the Master page
  4. Click on Task Panes > Data Source Library
  5. Click on the Announcements list and click Show Data
  6. Select the Title data value
  7. Click Insert Selected Fields as > Single Item Form
  8. Save the page and press F12 to Preview in Browser
  9. Right click the page in the browser and click View Source
  10. Select All > Copy
  11. Create another new page in SPD and Paste all of the content into this new page's Code View
  12. Click back into Design View
  13. Select the Textbox control for the Title field

At this point you can see that the class on this field is called ms-long. This is the class we need to override. So for other controls, we just want to follow the same steps above. By getting the server generated HTML from the browser in step 10, we are able to use all of SPD's tools to understand the HTML. I do this a lot when dealing with the customization of server controls.

Now we just need to add a <style> block inside our first page that says something like below, then save the page.:

<style>
.ms-long{width:100px;}
</style>

This will make the textboxes on this page 100 pixels wide.

If you want to know more about CSS in general, check out the information on the Microsoft SPD Site. If you want to know more about Core.CSS in SharePoint, check out this Style Guide.

Good luck!
-John Jansen
Test Lead, SharePoint Designer