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.