Resizable Control using jQuery

In this article I am going to discuss how to resize a control using jquery.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Resizable.aspx.cs" Inherits="Resizable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<%--Jquery--%>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<%--Style sheet for resize control--%>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
   
<style type="text/css">
       
.
resizable
        {   width: 250px;
            height: 100px;
            background: #FFFFFF;
            border: solid 1px red;
        }
       
.NormalTextBox
        {
            width: 250px;
            background: Yellow;
            border: solid 1px red;
        }

    </style>
 

    <script>

        $(document).ready(function() {

            $(".resizable").resizable();

        });

    </script>

</head>

<body>
    <form id="form1" runat="server">
   
<table width="60%" align=left>
       
<tr>
           
<td width="100px">
               
Name:
            </td>
           
<td align=left>
               
<asp:TextBox ID="TextBox1" runat="server" CssClass="NormalTextBox"></asp:TextBox>
           
</td>
       
</tr>
       
<tr>
           
<td width="100px">
               
Contact No:
            </td>
           
<td align=left>
               
<asp:TextBox ID="TextBox2" runat="server" CssClass="NormalTextBox"></asp:TextBox>
           
</td>
       
</tr>
       
<tr valign="top">
           
<td width="100px">
               
Address:
            </td>
           
<td align=left>
               
<asp:TextBox ID="TextBox3" CssClass="resizable" runat="server" TextMode="MultiLine"
                   
Rows="4" ></asp:TextBox>
           
</td>
       
</tr>
       
<tr>
           
<td width="100px">
           
</td>
          
<td align=left>
               
<asp:Button ID="Button1" runat="server" Text="Submit"></asp:Button>
           
</td>
       
</tr>
   
</table>
   
</form>
</
body>
</
html>

Output:  By debugging this application you will get the following output:

 image1.gif

Figure 1: 

You can resize the textbox by dragging the arrow (marked by red indicator sign) and drop anywhere on the screen.

image2.gif

Figure 2: You can increase and decrease the size of the control as you need.