How to set width and height of textarea

Question

0.00/5 (No votes)

See more:

JScript.NET

How to set width and height of textarea based on content

Posted 18-Jun-12 19:56pm

Arjun Menon U.K

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2012-06-18T20:45:00

The element textarea has certain irregularity, quite understandable though: you can set it width with CSS style and width property (please see http://www.w3schools.com/cssref/pr_dim_width.asp[^]), but the best way to set up its height is using the attribute rows.

Why? Because this way you define fixed integer (non-fractional) number of rows visible in the area at once, regardless of the font and other presentation detail, which is usually very convenient. Please see:
http://www.w3schools.com/tags/att_textarea_rows.asp[^].

[EDIT]

That's not all, now you need to determine the required width by the content of each line. You can do it by creating a hidden element and measuring its size. This is explained here:
http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript[^].

So, here is the conclusion: you have some text. I assume you want to fit it into the text area without wrapping (with wrapping, this is a different problem, also solvable, but this is not what you are asking about, because it would take width on input and produce required height on output, so we need to assume no-wrapping solution). First, you parse the text into lines; the number of lines will give you the value of rows. Then you put the text in a hidden div and measure required width defined by a longest line (longest not in characters, but in pixels, which is not the same). Basically, that's it.

—SA

Sandeep Mewara · Answer 2 · 2012-06-18T20:46:00

Solution 2

Simple way, something like:

HTML

<html>
<head>
<script>
function AdjustTextArea(ata) {
    // A fixed number lets say 20 to add for no clumsyness
    ata.style.height = (20+ata.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="AdjustTextArea(this)" style="overflow:hidden"></textarea>
</body>
</html>

A good blog to read: Expanding Text Areas Made Elegant[^]

Alternatively, have a look at this jQuery plugin: Autogrow Textarea[^]

Posted 18-Jun-12 20:46pm

Sandeep Mewara

Updated 18-Jun-12 22:37pm

v2

Comments

Sergey Alexandrovich Kryukov 19-Jun-12 3:01am

Sorry, Sandeep: I found your algorithm so surprising so I decided to test it. Guess what: it does not work properly. In all my tests, it showed just two first lines. It does not show the whole text in a single-line as well, tries to wrap it and shows only a part. So, practically it is used. I found it surprising because I did not see how it could possibly work. Could you possibly fix it? (I did not vote.)

I described the algorithm that should work in my answer, please see.
--SA

Sandeep Mewara 19-Jun-12 4:39am

Can you test again. I removed the dummy height I kept. I checked the JS and it looks working perfectly fine now. Textarea height increases as on we type.
Tried on IE8.

Which browser you are looking at?

Sergey Alexandrovich Kryukov 19-Jun-12 9:59am

Mozilla. I'll test again.
--SA

Sandeep Mewara 19-Jun-12 11:09am

Sure.

Sergey Alexandrovich Kryukov 29-Jun-12 22:10pm

Re-tested -- still not resized. The area shows only a part of 3-line text.
--SA

Sandeep Mewara 29-Jun-12 23:47pm

Strange. :(
Works fine for me in IE. Looks like different type of handling it in the two browsers.

Sergey Alexandrovich Kryukov 30-Jun-12 13:45pm

Sorry, I did not really understand how it works. Maybe you use different test. I used 3 or more lines of text; in this case, it shows only top two lines. On Mozilla, the area has a resizer; when I manually use it, it shows the full text: everything is correct. And I tested it on IE (don't remember version, the one which comes with Windows 7; I can check up when I come back to that machine) -- it was the same problem on IE.
--SA

Sandeep Mewara 5-Jul-12 2:30am

Strange! It works all good as expected for me here in IE8!
I put a <textarea onkeyup="AdjustTextArea(this)" style="overflow:hidden" id="bbn11"></textarea>
function AdjustTextArea(ata) {
ata.style.height = (20 + ata.scrollHeight) + "px";
}

Works fine, as soon the text goes to next line, the height of textarea increases.

Sandeep Mewara 19-Jun-12 11:10am

OT: Was not my answer Solution 1 & yours 2? A new bug in play? Or it is Ok?

Prasad_Kulkarni 19-Jun-12 8:23am

+5!

Sandeep Mewara 19-Jun-12 11:09am

Thanks.