increase textbox height based on text

Question

hi i want that textbox's height should be increased based on its content

textbox is multiline and its width i have put fixed.. n i dont want to show verticle scrollbar.

how to increase its height as its content increased

just like this way :

Amit Choudhary · Answer

hi diya , you can use following plugin of Jquery for this purpose: http://plugins.jquery.com/project/autogrow Note: Take care of class names and id of control while using this plugin. Don't forget to mark as answer.

Arun Kumar · Answer

Increase textbox height based on text Hai Please check the link also http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html

Arun Kumar · Answer

Hai Dipa Ahuja, Please check the following link for increase textbox height based on text . http://www.jacklmoore.com/autosize/

Arun Kumar · Answer

Hai Amit Choudhary This is arun kumar from India. I am also looking for the same like what dipa ahuja faced. I used your javascript. When i keyed some mesages it is extended automatically. but when i cleared it, it shows the extended textarea. I need it like facebook comments input. Thanks in advance...

Dipa Ahuja · Answer

i marked your posts thanx

Amit Choudhary · Answer

hi diya, you should mark my answer because your first problem is solved . and now its your second issue that coming.... i suggest you to add label control and a Text Box control... when you click on update set TextBox to visible and Hide the Label when you click on update then hide the TextBox and show the Label control. also put the lable inside a div give a proper css style with a border to give the look of inactive TextBox. Thats it. Now Please mark all answers cause it help me to get some points.

Dipa Ahuja · Answer

hi i already changed the id in javascript bt what m saying to you that your code is working properly when i am writing in textbox bt i have to make the textbox readonly after i write it this way: it is like orkut profile status.. butt when i click on update it shows the textbox with verticle scrollbar.

Amit Choudhary · Answer

hi diya, here is tha javascript code: // Value of the line-height CSS property for the textarea. var TEXTAREA_LINE_HEIGHT = 13; function grow() { var textarea = document.getElementById(' TextBox1 '); var newHeight = textarea.scrollHeight; var currentHeight = textarea.clientHeight; if (newHeight > currentHeight) { textarea.style.height = newHeight + 5 * TEXTAREA_LINE_HEIGHT + 'px'; } } Width="440" runat="server" BorderWidth="1" OnTextChanged="TextBox1_TextChanged" ReadOnly="True" Font-Size="Medium" ForeColor="#333399" onkeyup="grow();" CssClass="txt" /> use this code. i have changed the id in java script function var textarea = document.getElementById(' TextBox1 '); and it works fine m already tried it and it works great.

Dipa Ahuja · Answer

i want to use it with textbox this way: Width="440" runat="server" BorderWidth="1" OnTextChanged="TextBox1_TextChanged" ReadOnly="True" Font-Size="Medium" ForeColor="#333399" onkeyup="grow();" CssClass="txt" /> OnClick="Button1_Click" /> .cs protected void Button1_Click(object sender, EventArgs e) { if (Button1.Text == "Edit") { TextBox1.ReadOnly = false; TextBox1.Text.Replace("
", " "); TextBox1.BackColor = System.Drawing.Color.Gray; Button1.Text = "Update"; } else if (Button1.Text == "Update") { TextBox1.ReadOnly = true; TextBox1.BackColor = System.Drawing.Color.White; objcon.Open(); SqlCommand comm = new SqlCommand("Update profile set status=@status where profileId=@profileId", objcon); comm.Parameters.AddWithValue("@status", TextBox1.Text.ToString()); comm.Parameters.AddWithValue("profileId", p.profile_Id); comm.ExecuteNonQuery(); objcon.Close(); p.status = TextBox1.Text; Button1.Text = "Edit"; } } when i click on button first time(means when textbox "readonly=false" and we can enter text in it" the text dosnt show vertical scrollbar means working bt when i click on button to update the textbox it shows verticle scrollbars

Amit Choudhary · Answer

hi Diya, Well jquery solution is not working good as it is having some bugs still.... so i have found another solution using simple javascript. I'm uploading the project and its working fine. and Don't forget to mark as answer.

Amit Choudhary · Answer

ok wait i'll upload the project

Dipa Ahuja · Answer

to Raaj Kumar i tried what you wrote bt its not working, to Amit i dont have knowledge about jquery n i have never used it wo would you plz give me jz one example how i have to use it?

Raaj Kumar · Answer

Hi, Try this code, var tempStr = 0; var totalChar = 0; var totalRow = 1; function autoHeight(e, t) { var unicode = e.charCode ? e.charCode : e.keyCode; if (unicode == 13) { tempStr = 1; t.rows = t.rows + 1; totalRow = totalRow + 1; } if (totalChar == 0) { tempStr = t.value.length; } if (tempStr == 58) { t.value = t.value + '
'; t.rows = t.rows + 1; tempStr = 1; totalRow = totalRow + 1; } else { totalChar = t.value.length; tempStr = tempStr + 1; } var stempStr = t.value.split('
'); if (t.rows > stempStr.length) { t.rows = stempStr.length + 1; } } function onlostfocus(t) { var stempStr = t.value.split('
'); if (totalRow > stempStr.length) { t.rows = stempStr.length + 1; } } textarea { background-color: ThreeDFace; overflow: hidden; height:auto; } runat="server" TextMode="MultiLine" Rows="2" /> Regards, raaj

increase textbox height based on text

Answers (13)