ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window. <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" /> There are the following properties of Resizable extender control:
Example: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ResizableControl.aspx.cs" Inherits="ResizableControl" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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 id="Head1" runat="server"><title>Resizable Control</title><style type="text/css">.handle{width:10px;height:10px;background-color:#aaccee;}.resizing{padding:0px;border-style:solid;border-width:1px;border-color:#aaccee;cursor:se-resize;}</style></head> <body><form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="scriptManager" /> <div> <asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;"> <asp:Label ID="image1" runat="server" Text="ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window."> </asp:Label> </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizing" MaximumHeight="400" MaximumWidth="500" MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" /> </div></form></body></html> Output: Now Press F5 to debug the application. You will get the following output:If you want to resize the panel then put the mouse on right button corner and drag as you want.
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: