Click here to Skip to main content
13,045,657 members (69,123 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 7 Mar 2007

AJAX / ASP.NET- Resize text in the asp:Panel with a button onClick (OnClientClick) event and ResizableControlExtender

, 7 Mar 2007
Rate this:
Please Sign up or sign in to vote.
This article describes how to resize text in an asp:Panel on a button click event. It also resizes the text on the drag and drop event.


Recently, I got a requirement to have resizable text section on my ASP.NET page. The first thing that got in my head was to use ResizableControlExtender, and that worked well for me. I could resize my text just by dragging my panel handler. A few days later, I got a new requirement to have two buttons on the form, one to enlarge and one to shrink my text. This article describes how I accomplished this.


Microsoft released the AJAX toolkit that has a lot of nice features and controls. One of those controls is ResizableControl. My project uses this control.


As I mentioned before, I am using the Microsoft sample code. We have a simple panel that has some text that will be resized.

<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
      This text resizes itself to be as large as possible

Then, we need to hook up this panel to the ResizableControlExtender, so we use this code:


   ID="ResizableControlExtender2" runat="server"









   OnClientResize="OnClientResizeText" />

I think the control properties are self explanatory, except BehaviorID. The BehaviorID property lets you access the client-side behavior for your extender control from the script code in the client. You can set this BehaviorID to simplify the process. You need this reference because you will need to use these extender properties and functions.

OnClientResizeText is a JavaScript function that will handle the resize event. I got this from Microsoft.

function OnClientResizeText(sender, eventArgs) {                
    var e = sender.get_element();
    // Make the font bigger until it's too big
    while((e.scrollWidth <= e.clientWidth) || 
           (e.scrollHeight <= e.clientHeight)) { = (fontSize++)+'pt';
    var lastScrollWidth = -1;
    var lastScrollHeight = -1;
    // Make the font smaller until it's not
    // too big - or the last change had no effect
    // (for Opera where e.clientWidth
    //   and e.scrollWidth don't behave correctly)
    while (((e.clientWidth < e.scrollWidth) || 
            (e.clientHeight < e.scrollHeight)) &&
        ((Sys.Browser.agent !== Sys.Browser.Opera) || 
         (e.scrollWidth != lastScrollWidth) || 
         (e.scrollHeight != lastScrollHeight))) {
        lastScrollWidth = e.scrollWidth;
        lastScrollHeight = e.scrollHeight; = (fontSize--)+'pt';

At this point, your text can be resized with a simple mouse drag event.

Now, we need to do the same thing with two buttons: Enlarge and Shrink.

<asp:Button  ID="LinkButton1" runat="server" 

  Text="Enlarge text" OnClientClick="return OnClientTextGrow();" />
<asp:Button  ID="Button1" runat="server" 

  Text="Shrink text" OnClientClick="return OnClientTextShrink();" />

All those buttons do is initiate calls to the OnClientTextGrow() and OnClientTextShrink functions, respectively. These functions always return false, so no post back is generated.

Now, we can examine the OnClientTextGrow function:

function OnClientTextGrow () {               
    //Get Extender control
    var rcp = $find('ResizableControlBehavior2');                
    //Get Size Structure
    var size = rcp.get_Size();
   //Set new size for this control
    rcp.set_Size( {width: size.width*1.05, height: size.height*1.05} );
    return false;

Since we specified BehaviorID in our ResizableControlExtender, we can use it to access the control's functions. This control has a get_Size() function that will get us the control size. The same way, we can use set_Size() to set new control dimensions. For simplicity, I simply multiply the current control size * 1.05.

Source code

You can simply download the provided sample project, open it with Visual Studio 2.0, and run it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Generallam knal Pin
ramlie4-Aug-08 21:01
memberramlie4-Aug-08 21:01 
AnswerRe: lam knal Pin
Gaurav.Tekkie31-May-10 23:45
memberGaurav.Tekkie31-May-10 23:45 
GeneralResizableControlExtender Properties Pin
sssabi12-Apr-07 20:34
membersssabi12-Apr-07 20:34 
AnswerRe: ResizableControlExtender Properties Pin
Orka13-Apr-07 15:35
memberOrka13-Apr-07 15:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 7 Mar 2007
Article Copyright 2007 by Orka
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid