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

Comments

• Anonymous
  January 25, 2008
  PingBack from http://freedombloghost.info/?p=29708

• Anonymous
  February 15, 2008
  Great Post. My requirement is that I need to create a custom column of type 'choice' for a list   but the check boxes should appear in horizontal pattern rather than the default vertical pattern. Any Suggestions?

• Anonymous
  February 15, 2008
  The comment has been removed

• Anonymous
  March 07, 2008
  The comment has been removed

• Anonymous
  March 31, 2008
  This worked well - but: I have a bunch of fields I want to be different lengths. One field is a 3 digit number, the next a name of up to 30 characters and so on. The server tags them all as .ms-long however, so the above solution only allows me to change them all to the same length - either too long for numbers or too short for the names. Is there any way around that?

• Anonymous
  April 11, 2008
  Putting something like the javascript code below does a fairly decent job of acheving variable length form fields.. <script> var inputs = document.getElementsByTagName("input"); var width = 0; for(var i=0;i<inputs.length;i++) { if(inputs[i].className == "ms-long") { width = (inputs[i].maxLength * 11) + 2; if(inputs[i].maxLength != 255)//&& width < 390)   inputs[i].style.width = width + "px"; } } </script>

• Anonymous
  April 11, 2008
  Hi Jax, I pasted your code in the this tag-<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> of the newform.aspx page but i don't know how to use this javascript to make field lenghts of variable sizes..could you please direct? many thanks Jay

• Anonymous
  April 14, 2008
  The comment has been removed

• Anonymous
  April 18, 2008
  Just a quick note, the class to override the width for a people picker is ms-usereditor, not ms-inputuserfield

• Anonymous
  April 21, 2008
  The JavaScript I posted earlier calculates the field width based on how many capital "W"s would fit into the rendered textbox - and it works great as long as the user enters all capital Ws but often I need the user to enter a phone number. The following JavaScript code allows me to specify the exact length I would like to use for the field in pixels by entering the length anywhere in the field description using the format $<length>px The javascript first loops through the collection of input fields looking for fields with the style "ms-long". It then looks at the innerText of the parent TD element (field description) of those fields to find a $ sign followed by some numbers followed by 'px'. It then uses this info to set the field width and finally replaces the innerText to prevent the info from displaying to the user..    var inputs = document.getElementsByTagName("input");    var width = 0;    for(var i=0;i<inputs.length;i++)    {        if(inputs[i].className == "ms-long")        {            var intxt = inputs[i].parentNode.parentNode.innerText;            var match = /$([0-9]*px)/i.exec(intxt);            if(match)            {                                inputs[i].style.width = match[1];                inputs[i].parentNode.parentNode.innerHTML = inputs[i].parentNode.parentNode.innerHTML.replace(match[0],"");            }        }    }

• Anonymous
  May 20, 2008
  The comment has been removed

• Anonymous
  July 03, 2008
  hi very useful post: thx I have a question about resize of sharepointcomposant " list with multiple choise" , this composant dont have a style classe . how can i do for resize the two list ? thx

• Anonymous
  July 25, 2008
  to know which css class is being used, IE Developer Toolbar is a great tool! I just wanted to increase the width of controls in new, edit and disp forms of a list, I just overrode .ms-long (new, edit) and .ms-formbody (disp form)!

• Anonymous
  August 03, 2008
  I can't believe this is the only way to change the form field values.  Didn't you guys think that users might want to change the field sizes and edit the visual layout?  Was it too hard to add an additional property for the visual properties of each field?  So many issues like this.

• Anonymous
  August 11, 2008
  I agree, we are getting egg on our faces almost daily due to small silly items being so difficult to manipulate. Clients don't care what or where you need to change. They simply want the changes.

• Anonymous
  October 24, 2008
  The comment has been removed

• Anonymous
  December 03, 2008
  The comment has been removed

• Anonymous
  March 12, 2009
  For the Rich Text Fields, the class is either ms-rtelong or ms-rtelonger (or both).  I'm not sure what determines which class applies...

• Anonymous
  May 19, 2009
  Hi, I also changed the ms-rtelong and ms-long to eg 800, but when I enter a lot of text in it, it is ok when you look at it via the new or edit item, but when you just view the item, the text is shortened (wrapped) after some words, so the width is not kept in the dispform css ???

• Anonymous
  May 27, 2009
  I added width:800px to ms-formbody now and apparently this works fine

• Anonymous
  July 22, 2009
  The comment has been removed

• Anonymous
  August 14, 2009
  To change the width of the people picker, I used .ms-usereditor.

• Anonymous
  September 24, 2009
  I've been able to use the javascript provided by jaxstate to set the length of a field with the class ms-long, however I am unable to get the same to work for a lookup field (ms-lookuptypeintextbox).  I'm using the IE developer toolbar to find the class but when I modify the script to check for that value it doesn't work.  Any ideas?

• Anonymous
  October 02, 2009
  Excellent information - huge help !!

• Anonymous
  November 09, 2009
  The comment has been removed