Can you change the height/width of an ASP.NET control from a Javascript function?

Question

What is the best way to change the height and width of an ASP.NET control from a client-side Javascript function?

Thanks, Jeff

Answer 1

You can use the controls .ClientID and some javascript and change it that way.

You can do it through CSS height/width or on some controls directly on the control itself.

Answer 2

Because of the name mangling introduced by ASP.NET, I use the function at the bottom to find ASP controls. Once you have the control, you can set the height/width as needed.

example usage:

<input type='button' value='Expand' onclick='setSize("myDiv", 500, 500);' />

...

function setSize(ctlName, height, width ) {
    var ctl = asp$( ctlName, 'div' );
    if (ctl) {
       ctl.style.height = height + 'px';
       ctl.style.width = width + 'px';
    }
}


function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

Answer 3

Hello,

Yes, it's possible. ASP Controls are rendered as HTML controls on the browser with some added attributes. If you gave your ASP.Net control an ID while you created it, it will show up as the ID of the HTML control too.

You should be able to access the controls using javascript's getElementById() function, and you should be able to modify the CSS attributes (style as specified in the message above this one).

If you use JQuery, selection and setting CSS styles can be easier, example

$("#myControl").css("width")== myNewValue;

Cheers