Add resize handle to multiline text field (plain text, rich text and enhanced rich text)

13.03.2011: Updated the code and made it easier to use by referring jQuery and jQueryUI from Google.

I got this request from Larry:

Maybe this time I can post something we can get to work. I have been trying to peice together several scripts, including yours to make the multiple line text fields expandable. I found a workiong script but it only worked on plain text. I am trying to modify it to work on rich text. When i add your script for fieldinternalname I can at least see the image under the rich text box, but it does not work. using the new script I can not get the plain text to work. this is the link to the jquery plugin for textarea resizer…

The plain text multi lines are no problem, but the rich text and enhanced rich text ones are a bit tricky. They are made up of <IFRAME>’s, and the input does not go in a <textarea> tag.

I have made this solution based on the jQuery UI “Interaction” Resizable.

Internet Explorer 8:
IMG
Firefox 3.5.7:
IMG

Add a CEWP below your NewForm and EditForm and add this code:
Get the code here

Ask if anything is unclear.

Regards
Alexander

14 Comments on “Add resize handle to multiline text field (plain text, rich text and enhanced rich text)”

  2. Pingback: Links (1/21/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  3. Is there a way to set a default size of a field or multiple fields? Using another script to prepopulate the rich box I find the table I populate seems hard to read because of the limited space. Once the field is resized larger it looks fine. can this value be set or predefined?

    1. Hi,
      Like this:

      <script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();

$(fields['EnhancedRichText']).find("iframe[class^='ms-rtelong']").css({'height':'500px','width':'600px'});

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;	
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7; 
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

      This code sets a field with FieldInternalName of “EnhancedRichText” to height=500px and width=600px.

      Alexander

      2. Try this code – replace “MultilineRich” with your field name and adjust the size to your liking.

        function resizeMultiline(){
	var fields = {}, m;
	spjs.$("td.ms-formbody").each(function(){
		m = spjs.$(this).html().match(/FieldName="(.+)"\s+FieldInternalName="(.+)"\s+FieldType="(.+)"\s+/);
		if(m!==null){
			fields[m[2]] = {"type":m[3],"disp":m[1],"field":this.parentNode};
		}		
	});	
	$(fields['MultilineRich'].field).find(".ms-rtestate-write").css({'height':'400px','width':'400px','min-height':'100px','min-width':'300px'}).parent().css("float","left");
}
resizeMultiline();

        Alexander

  5. Thanks for that amazing post……… Can I set the default font size in this RTE to be more that what it is now……… overriding the style (.rtelong) does not work….. for font formatting alone……… other properties like width, height etc can be formatted……….

    Thanks a lot in advance…………… quick reply appreciated………..

  6. Hi Alexander,
    thank you for all this useful tutorials an scripts at first. I tried out the Resize script with a MOSS 2007 German but it does not work. No error message in the IE status bar.
    This ist my CEWP:

    .customFormbodyResizeClass{
    padding:3 10 10 6;
    border-right:1px gray dotted;
    border-bottom:1px gray dotted;
    }

    Do you have any idea what mistake I am doing?
    britta

  7. Pingback: 新起点

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.