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.
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:
- ASP.NET creates very long and hard to use IDs
- 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:
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.
Trial and Error
Here is the code I used:
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.
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?
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.
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?
@Jon I did some experimenting but I was never able to get this working on the Rich Text Field
It’s also possible to use jquery to resize de iframe: