Saturday, January 14, 2012

SharePoint TextArea Auto resize

Scenario:
Client wanted to have all the multi-line text-boxes to adjust width automatically like Facebook.

And I love SharePoint for its great flexibility where you can use all great jQuery plugin's of the world within SharePoint ( with small tweaks )

Solution:
I have used the Elastic project , jQuery plugin.
You can download files here Elastic

Code:

<script type="text/javascript" src="/_layouts/ClientFolder/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/ClientFolder/jquery.elastic.source.js"></script>

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("AdjustTextArea");

function AdjustTextArea() {

jQuery.noConflict();

jQuery('textarea').elastic();
jQuery('textarea').trigger('update');

}
</script>

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="6" Width="100%" />
Found a Bug:
As I was trying to use it with SP2010, I applied a CssClass="ms-long" and got a weird behavior of text box restricting to show only 29-30 lines. So removed it.

0 comments: