Auto Resize TabContainer

Introduction

While dynamically loading TabPanels into a TabContainer, I noticed that the border on the TabContainer wouldn't automatically resize itself. I also couldn't find anything on the web about it. Eventually, I set it to a certain height and hoped that no one would notice, but they did. The content ran on down the page, and the TabContainer border height was stuck at 400. I used this code to fix that problem.

Hope it works for you!

After creating this write-up, I also found that creating a panel (the equivalent of a div tag, not a tab panel), setting the height to 100%, and wrapping all the controls in the tab with the panel works just as well - no JavaScript is needed when using this method.

I will leave this up in case someone needs to figure out how to resize a tab in JavaScript for some reason.

Using the code

Use the OnClientActiveTabChanged property to call some JavaScript.

<ajaxToolkit:TabContainer ID="tabContainer" runat="server" 
                          OnClientActiveTabChanged="doSizeUp" />

Then use this JavaScript function to resize:

function doSizeUp(){
    //get the tabContainer for later reference
    var tc = document.getElementById("<%=tabContainer.ClientId%>");
    
    //get the index of the tab you just clicked.
    var tabIndex = 
     parseInt($find("<%=tabContainer.ClientId%>").get_activeTabIndex(), 10);
    
    //set the tabcontainer height to the tab panel height.
    tc.childNodes[1].style.height = 
     tc.childNodes[1].childNodes[tabIndex].clientHeight;
}

Don't forget to call doSizeUp when the page loads. Here's something that does that:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedHandler);
function PageLoadedHandler(sender, args) {
    setTimeout('doSizeUp()', 1);
}

Points of Interest

Please be aware that I only checked this in IE6 and IE7, as that's all that's required when working on our intranet, but I believe it will work in most major browsers.

History

• Submitted - 4/25/08.
• Revised - 4/25/08 - found out another way to do it... probably easier - explained in the introduction.