Get Width of a Dynamic TabPanel Header in ASP.NET Ajax TabContainer Using JavaScript

Introduction

When working with the AjaxControlToolkit TabContainer, each TabPanel is rendered with a corresponding tab header span. Sometimes, you may need to calculate the width of a tab header dynamically — for example, to adjust the UI when a tab is closed, or to realign a close button to stay under the mouse pointer.

A developer ran into this issue while debugging an ASP.NET page in IE11:

“When closing the last tab, I want the close button of the previous tab to appear exactly where the mouse was. But how do I get the width of the previous tab’s header?”

The Problem

A first attempt looked like this:

var i = 1; 
var count = 1;

function removeAt(tabPanelClientID, index) {
    if (index == i) {
        var prevTabPanel = $get('__tab_TabContainerMain_TabPanel' + (index - 1));
        alert('ptp=' + prevTabPanel + ' width=' + prevTabPanel.style.width);
    }
    count--;
}

But prevTabPanel.style.width returns nothing, because style.width only works if an inline style was set. For dynamically rendered elements like TabContainer headers, the width is controlled by CSS and layout, not inline styles.

Calling prevTabPanel.width() also failed with undefined, since raw DOM elements don’t have a .width() method (that’s a jQuery function, not native JS).

The Solution: Use offsetWidth

In JavaScript, the proper way to get the actual rendered width of an element is via the offsetWidth property:

var prevTabPanel = $get('__tab_TabContainerMain_TabPanel' + (index - 1));
if (prevTabPanel) {
    var width = prevTabPanel.offsetWidth;
    alert("Previous tab width = " + width + "px");
}

• offsetWidth → Returns the element’s layout width (including padding and borders).
• clientWidth → Returns width without borders.
• getBoundingClientRect().width → Returns a floating-point width, useful for more precise layout calculations.

Visual Studio Tip

If you’re debugging in Visual Studio, you can also quickly check an element’s rendered width/height by hovering your mouse over the resizing handles (the “bubbles”) of the control in Design View — Visual Studio displays the current size.

Conclusion

To get the width of a TabPanel’s header in an ASP.NET Ajax TabContainer:

• Don’t use .style.width (works only for inline CSS).
• Don’t use .width() unless you’re using jQuery.
• ✅ Use offsetWidth, clientWidth, or getBoundingClientRect().width for reliable results.

This approach ensures you can dynamically measure tab header widths and build UI behaviors like repositioning close buttons or aligning controls on tab change.

Cheers!!!