Automatically Increase height of multiline texbox or textarea as text grows in asp .net

In this asp .net tutorial we will learn how to implement JQUERY Autosize to resize our textarea or multiline textbox as text inside multiline textbox increases. For this tutorial I'll use awesome Jquery Autosize plugin built by Jack Moore. This Autosize plugin has two option to increase textbox height as per text grows. 
 

1) Autosize with CSS transition.

2) Autosize with no animation. 

We will implement both the effects in this tutorial.

 

Step1: Create a new asp .net website.


Step2: Download Jquery Autosize plugin.

You can download plugin from here.


Step3: Add jquery.autosize.min.js file from downloaded folder to your website.


Step4: Add default.aspx page.


Step4: Add refrence to following Jquery files inside head section of your default.aspx page.

 

 


    

 

 

Step5: Add following css code between head section of your default.aspx page.

 

 

 

 

 

Step6: Add following code in your default.aspx page. This will create two multiline textboxes. 

 

 

 
    

 

 

Step7: Add this Jquery code just above the closing body tag.

 

 


 

 

Final output:

1) With CSS transition effect:

 

 Jquery-autosize-example-in-asp-net-with-effects

 

2) Without CSS transition effect: 

 

 Jquery-autosize-example-in-asp-net-to-resize-multilinetextbox


 

Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
7 + 5 =
 

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice