SharePoint Customization: Wider (Forms/Text Boxes)

I just noticed this neat little tip over on MSD2D.

By Default all text boxes have fixed width of 386px. It’s common to wish to change this and here is how you can do it simply using CSS.

Note: This message is not part of the MSD2D article but … Remember editing “Default” files is never a good idea. This situation is slightly different as it is a lightweight edit but make sure you comment very well anything you change. This is better done via a theme.css in my personal opinion but that wouldn’t make it global.

Open OWS.CSS. It is located under C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES. (for non-english WSS and non-english site definitions, too, you should find and open corresponding OWS.CSS files).

Change width in ms-long class from 386px to 100%.
This class is used by ListFormWebPart for text fields (like Title) and multiline text fields (like Comment).

Add width: 100% to ms-formbody class.
This class is used by ListFormWebPart for tags, which hold field values.
Result will be that all text boxes in New Item / Edit Item forms for all lists now will use full width of browser window and will dynamically resize as you resize the browser.

Code Sample
.ms-long {
font-size: 8pt;
font-family: Verdana, sans-serif;
width: 100%;
}
.ms-formbody {
font-family: verdana;
font-size: .7em;
vertical-align: top;
width: 100%;
}

You may also like...

3 Responses

  1. Dmitry says:

    >>C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES

    in my case this didn’t work. i get result by opening page in SharePoint Designer, and found those styles in style broser, and then by double click i opened core.css, by this was not global, but local core.css for site: http://yoursite/_layouts/core.css. editing ms-long and ms-formbody in this file made changes in page look, any manipulations with *.css in C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\ was unhelpful.

  2. Dan Metzger says:

    I’m using MOSS 2007, and was able to implement this by modifying:
    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\CORE.CSS
    Basically I searched the aforementioned CORE.CSS file for Width and replaced most pixel values with 100%, saved the file, and ran IISRESET.

    It was also necessary to use Sharepoint Designer to specify the width of the containing boxes (in the New Form, Edit Form, and Display Form aspx files) as 100% rather than a certain number of pixels.

    Now the boxes appear wide and use the full width of my widescreen display!!!! ….until I click on them. After clicking on a rich-text entry box, it will display the controls and shrink it down to the usual width. Grrr! I’ll have to investigate more to find a way to make it stick…maybe it’s time to de-compile that Microsoft.Sharepoint.SPField DLL….
    -Dan Metzger

  3. Milton Lopez says:

    Thanks for posting this. I tried it hoping to get wider boxes for editing nd displaying multi-line text fields, but my lists still look the same (WSS 3.0 on W23 SP2), even after re-startting IIS. Should I try adjuting the width of the zones using SharePoint Designer?

    Thanks in advance.

I would love to hear from you.

%d bloggers like this: