Friday, September 4, 2009

Enlarge input width size in edit/new pages

When editing list items in SharePoint, one of the most irritating issues I find is the width of the input fields, in particular the rich-text editor. So I have decided to fix this.




First of all we need to go to the page and set it in edit mode, which can be done by using the ToolPaneView=2 querystring. (See SharePoint Kings for more info), eg:

.....your-sharepoint-list-url..../EditForm.aspx?ToolPaneView=2

Then add a Content Editor WebPart. Make sure it is hidden in the appearance.
Finally add the following code:

<script type="text/javascript" src="{url-to-jquery}/jquery.js" language="javascript"></script> 


<script type="text/javascript">
function docready() {
  $('.ms-formbody').css('width', '100%');
  $('.ms-long').css('width', '100%');
  $('.ms-rtelong').css('width', '100%'); 
  $('.ms-rtelonger').css('width', '100%'); 
  $('#onetIDListForm').css('width', '100%');
}

_spBodyOnLoadFunctionNames.push("docready");

</script> 

Your forms will now use the complete width of your window.

Update: 25 september - Added the rte-longer class for also resizing the rich-text boxes

No comments: