Click here to Skip to main content
15,943,008 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How to set width and height of textarea based on content
Posted

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
 
Share this answer
 
v4
Comments
Manas Bhardwaj 19-Jun-12 6:31am    
Good +5!
Sergey Alexandrovich Kryukov 19-Jun-12 9:59am    
Thank you, Manas.
--SA
Arjun Menon U.K 20-Jun-12 0:14am    
Sergey Can You Please add some kind off code or something to show this side of your 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)],because am not that much in JS ..Please
Sergey Alexandrovich Kryukov 29-Jun-12 22:20pm    
Sorry, I don't have so much time these days. Could you try it and ask another question if you face a problem? It's really simple but needs some time.
--SA
Arjun Menon U.K 20-Jun-12 0:17am    
This is the code now am using
<textarea id="txtMessage" name="txtMessage" style="width: ; height: auto; overflow: hidden;
border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;
background-color: transparent;" onfocus="textAreaAdjust(this)" önmouseout='textAreaReAdjust(this)' readonly="readonly">
</textarea>
the two function onfocus and onmouseout are not working the way i want.The size keeps increasing on every mouse clicks



function textAreaAdjust(o) {
o.style.height = (25 + o.scrollHeight) + "px";
o.style.width = (25 + o.scrollWidth) + "px";
o.style.overflow = "hidden";
}


function textAreaReAdjust(o) {
o.style.height = (25 + o.scrollHeight) + "px";
o.style.width = (25 + o.scrollHeight) + "px";
o.style.overflow = "hidden";
}
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[^]
 
Share this answer
 
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

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900