How to grow a textbox to match size of input for data entry dynamically (ASP.NET)

views:

624

answers:

How to grow a textbox to match size of input for data entry dynamically (ASP.NET)

Hi,

I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.

Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.

On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).

However, it has no effect on Firefox, or IE7 for that matter.

Is there a relatively easy fix for this?

Thanks!

+2 A:

You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.

http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html

Richard Reddy 2010-02-03 19:22:01

I'm aware of jquery, not looking to add even more scripting to the site if possible. My question is somewhat different in that I am not looking to add jquery (if possible) or any unnecessary overhead. With the AJAX toolkit, DB accesses, web services, I really don't want to add yet another module to the mix.For now IE6 is the standard browser but I want to future proof the app (as well as target more standard browsers).

Terry 2010-02-03 20:37:41

I don't think you can do this with the standard asp.net ajax control toolkit - unless you roll your own control. In fact that effect could only really be accomplished with javascript if it's the effect I think your trying to achieve. The example I provided works in all browsers and will continue to be supported by jquery going forward. It's also only 19.5k - if you're worried about bloat, and it's an option, try to avoid the ajax toolkit as adds a lot of additional code to your page that using jquery would actually help you avoid. Sorry I can't answer your query better! Good luck :)

Richard Reddy 2010-02-03 22:48:04

Thanks, I've been looking at jQuery a little more but having issues with the autogrow JQuery plugin within a collapsablepanel extender (of course). I'll take a look at the plugin provided by Jason Frame's jQuery grab bag (from your link).

Terry 2010-02-05 21:51:22

I ended up caving and adding in a jquery plugin that was pretty basic at http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/ and it seemed to work nicely for viewing only, but when switching to edit mode the autogrow properties are lost ... sounds like that will be another question for me to search for/post (sigh). Thanks

Terry 2010-02-11 21:06:06

Good to hear you managed to get it working :) If it stops working in edit mode check the id value of the textarea or class values on the textare aren't changed by switching to edit mode as jquery could be looking for spcific names or id's. Hope that helps, good luck!

Richard Reddy 2010-02-12 14:29:37

+1 A:

Josh 2010-02-03 19:33:49

Not as similar as you think unfortunately - look at the link you referenced as it refers to growing horizontally (not vertically). I want to avoid using jquery if possible as the app already uses web services, ASP.NET and a SQL Server connection. The less overhead the better.

Terry 2010-02-03 20:35:33

ansaurus

tags:

views:

answers:

How to grow a textbox to match size of input for data entry dynamically (ASP.NET)

related questions