increase textbox height based on text

Dipa Ahuja

16y21.1k.NET

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 :

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Choudhary16y ago
Accepted 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.
0
Arun Kumar13y ago
Increase textbox height based on text

Hai Please check the link also

http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html
0
Arun Kumar13y ago
Hai Dipa Ahuja, Please check the following link for increase textbox height based on text.

http://www.jacklmoore.com/autosize/
0
Arun Kumar13y ago
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...
0
Dipa Ahuja16y ago
i marked your posts

thanx
0
Amit Choudhary16y ago
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.
0
Dipa Ahuja16y ago
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.
0
Amit Choudhary16y ago
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.
0
Dipa Ahuja16y ago
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("\n", "
");
            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
0
Amit Choudhary16y ago
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.
0
Amit Choudhary16y ago
ok wait i'll upload the project
0
Dipa Ahuja16y ago
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?
0
Raaj Kumar16y ago
Hi,

Try this code,









                    runat="server" TextMode="MultiLine" Rows="2" />




Regards,
raaj
0