Resizable textareas in SharePoint edit forms

So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.

I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.

Selecting the Element

In order for the jQuery code to work it has to know which elements on the page you want to work with.

Here is the code SharePoint renders for a text box:

<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>

There are two problems:

  1.  ASP.NET creates very long and hard to use IDs
  2. The class ms-long culd apply to other elements on the page that I dont want to use the effect on.


So all we have left to use is the title attribute. With jQuery we can select elements based on thier title. There are more details on using jQuery selectors on the jQuery website. To select our text box with the title “Simple Text” we use the following code:

$('textarea[title="Simple Text"]')

A quick way to check and be sure your selector is working is to call the addClass function in jQuery and change the background color or border color of the element.

grippie

Trial and Error

So after I verified the selector was working I applied the plugin but nothing happened. After some testing I realized the script would not work on the rich text box because SharePoint has a JavaScript that runs to initialize the WYSIWYG editor. I am still experimenting so if I get it working on the rich text field I will post and update. For now it only works with the plain text field.

Here is the code I used:

<script type="text/javascript" src=<a href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js</a>></script>
<script type="text/javascript" src="scripts/jquery.textarearesizer.compressed.js"></script>
<script type="text/javascript">
	/* jQuery textarea resizer plugin usage */
	$(document).ready(function() {
	$('textarea[title="Title of your field"]').TextAreaResizer();
			});
</script>
<style type="text/css">
div.grippie {
	background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
	border-color:#DDDDDD;
	border-style:solid;
	border-width:0pt 1px 1px;
	cursor:s-resize;
	height:9px;
	overflow:hidden;
	}
.resizable-textarea textarea {
	display:block;
	margin-bottom:0pt;
	}
</style>

I just put the code in a content editor webpart on the EditFomr.aspx and NewForm.aspx pages.  To add the CEWP to the page just add “&ToolPaneView=2” to the end of the url to get the toolbar.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

6 thoughts on “Resizable textareas in SharePoint edit forms

  1. Cool beans. Sometimes, I feel like the text-area for fields such as Comments can be a bit bigger. Now, I see how to easily do it.

    Any idea when you can get it to work with the rich-text editor-type field?

    1. I am trying to figure that out. For some reason the script would not work on the rich text field. I think its because of something in core.js.

  2. I’ve just found this after hitting the same problem. Sadly, when I save my script after changing in the Source Editor, the script triggers and sets it! Just once. That’s the only time.

    Has anyone found a solution?

  3. It’s also possible to use jquery to resize de iframe:

    $(“iframe[id*=’List_Field_Name’]”).width(“100px”);

    $(“iframe[id*=’List_Field_Name’]”).height(“100px”);

Leave a Reply

Your email address will not be published. Required fields are marked *